Проброс значения data-атрибута при клике [дубликат]

266

29 августа 2017, 09:59

На данный вопрос уже ответили:

Как вернуть значение из события или из функции обратного вызова? Или хотя бы дождаться их окончания 3 ответа

Есть набор элементов input. Необходимо при клике на любом элементе, независимо от его типа, вывести его значение data-fname или id в поле data-debug.

Основное условие: результат обработчика должен быть доступен за пределами самого обработчика т.к. в последующем возвращённое обработчиком значение переменной используется в другом месте кода

var prefix_acc = 'acc_'; 
var acc_id = ''; 
$('[id^="' + prefix_acc + '"]').click(function() { 
  var acc_id = $(this).attr("id"); 
  return acc_id; 
}); 
$("[data-debug]").text(acc_id);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<input type="text" data-fname="number" id="acc_number"><br> 
<input type="text" data-fname="date" id="acc_date"><br> 
<input type="text" data-fname="name" id="acc_munit"><br> 
<input type="text" data-fname="dislt" id="acc_tlocal"><br> 
<input type="text" data-fname="disln" id="acc_loc"><br> 
<input type="text" data-fname="disla" id="acc_obl"><br> 
<input type="text" data-fname="objects" id="acc_objects"><br> 
<input type="text" data-fname="laborators" id="acc_laborators"><br> 
<input type="text" data-fname="types" id="acc_types"><br> 
<input type="text" data-fname="materials" id="acc_materials"><br> 
<input type="text" data-fname="study" id="acc_study"> 
<hr> 
<div data-debug> Data-Fname / ID </div>

Answer 1

Вы редекларируете acc_id внутри обработчика click как локальную переменную. Уберите var и внесите $("[data-debug]").text(acc_id); внутрь обработчика.

var prefix_acc = 'acc_';
var acc_id = '';
$('[id^="' + prefix_acc + '"]').click(function() {
  acc_id = $(this).data("fname");
  $("[data-debug]").text(acc_id);
});

Answer 2

var prefix_acc = 'acc_'; 
var acc_id = ''; 
$('[id^="' + prefix_acc + '"]').click(function() { 
  var acc_id = $(this).attr("id"); 
  $("[data-debug]").text(acc_id); 
  return acc_id; 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<input type="text" data-fname="number" id="acc_number"><br> 
<input type="text" data-fname="date" id="acc_date"><br> 
<input type="text" data-fname="name" id="acc_munit"><br> 
<input type="text" data-fname="dislt" id="acc_tlocal"><br> 
<input type="text" data-fname="disln" id="acc_loc"><br> 
<input type="text" data-fname="disla" id="acc_obl"><br> 
<input type="text" data-fname="objects" id="acc_objects"><br> 
<input type="text" data-fname="laborators" id="acc_laborators"><br> 
<input type="text" data-fname="types" id="acc_types"><br> 
<input type="text" data-fname="materials" id="acc_materials"><br> 
<input type="text" data-fname="study" id="acc_study"> 
<hr> 
<div data-debug> Data-Fname / ID </div>

Answer 3

Блин, ну зачем тут велосипеды придумывать? Все просто. Конкретно в данном примере код таков (используя jQuery):

var $data_debug = $('[data-debug]'),
    acc_id;
$('input').click(function() {
    var $this = $(this);
    acc_id = $this.attr('id');
    $data_debug.text($this.attr('data-fname') + ' / ' + acc_id);
});

А вообще лучше добавь элементам классы и по возможности не засоряй глобальное пространство, используй обертки типа (function($){/*Код*/})(jQuery);

Answer 4

Решение вопроса:

var prefix_acc = 'acc_'; 
$(function() { 
  $('[id^="' + prefix_acc + '"]').click(function() { 
    var id_acc = $(this).data("fname"); 
    MyFunction(id_acc); 
  }); 
 
  function MyFunction(inp_id) { 
    //код выполнения 
    $("[data-debug]").text(inp_id); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<input type="text" data-fname="number" id="acc_number"><br> 
<input type="text" data-fname="date" id="acc_date"><br> 
<input type="text" data-fname="name" id="acc_munit"><br> 
<input type="text" data-fname="dislt" id="acc_tlocal"><br> 
<input type="text" data-fname="disln" id="acc_loc"><br> 
<input type="text" data-fname="disla" id="acc_obl"><br> 
<input type="text" data-fname="objects" id="acc_objects"><br> 
<input type="text" data-fname="laborators" id="acc_laborators"><br> 
<input type="text" data-fname="types" id="acc_types"><br> 
<input type="text" data-fname="materials" id="acc_materials"><br> 
<input type="text" data-fname="study" id="acc_study"> 
<hr> 
<div data-debug> Data-Fname / ID </div>

Всем спасибо за помощь. Ещё раз мои извинения за мой тупизм. Переменную надо было не сохранять как внешнюю, а передать как параметр в функцию для последующей обработки, включив имя функции в обработчик.