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

Question

Есть набор элементов 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>

Вам важно понять, что в Вашем коде строчка $("[data-debug]").text(acc_id); выполнится до всяких кликов. — , Aug 26 '17 at 18:35
@Igor, тогда подскажите как мне вытянуть результат обработки в виде переменной на свет божий, чтобы использовать этот результат в дальнейшем
...третьи сутки бьюсь над этой задачкой... — War Doctor, Aug 26 '17 at 18:37
так, как я это сделал в ответе. Попробуйте объяснить, что у Вас не работает, когда Вы используете код из моего ответа. — , Aug 26 '17 at 18:45

score 1 · Answer 1 · 2017-08-26T18:03:13.530

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);
});

edited Aug 26 '17 at 18:03

answered Aug 26 '17 at 17:50

Не работаеть((( – War Doctor Aug 26 '17 at 17:52
@WarDoctor Вы неаккуратно скопировали мой код :) – Aug 26 '17 at 17:53
Мои извинения... – War Doctor Aug 26 '17 at 17:58
Переменная acc_id в последующем коде должна быть использована, поэтому проверка ее значения и вынесена за пределы обработчика – War Doctor Aug 26 '17 at 18:06
какая проверка? Назначается-то эта переменная внутри обработчика. – Aug 26 '17 at 18:07
Значение переменной дается внутри обработки, а вот это значение вытащить из него и потом использовать... – War Doctor Aug 26 '17 at 18:13
@WarDoctor я уже показал, как это сделать. Что для Вас означает слово "потом"? – Aug 26 '17 at 18:15
"потом" - у меня есть несколько функций где с этой переменной планирую делать преобразования – War Doctor Aug 26 '17 at 18:17
@WarDoctor код, который сейчас в ответе, Вас все еще не устраивает? – Aug 26 '17 at 18:19
извините, но не в полном объеме... такое я уж тупое и настырное – War Doctor Aug 26 '17 at 18:23
@WarDoctor Что у Вас не работает с предложенным кодом - я должен сам догадаться? – Aug 26 '17 at 18:24
Ваш код рабочий, но основное условие обработчик должен вернуть значение переменной для последующей обработки этой переменной в другом месте программы. Поэтому и сделана проверка за пределами обработчика – War Doctor Aug 26 '17 at 18:27
так, беседа пошла по кругу. – Aug 26 '17 at 18:29

score 0 · Answer 2 · answered Aug 26 '17 at 17:52

0

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>

answered Aug 26 '17 at 17:52

MedvedevDev

5,237

Так работает, но мне надо использовать переменную acc_id за пределами минифункции... Поэтому $("[data-debug]").text(acc_id); установлена именно вне диапазона click – War Doctor Aug 26 '17 at 17:57
@WarDoctor Вы умышленно умолчали об этом в вопросе? – Aug 26 '17 at 17:58
return acc_id; - смысл? – Aug 26 '17 at 17:59
Код привел именно так как необходимо для его реализации в дальнейшем переменная acc_id в дальнейшем должна быть использована, поэтому и надо ее вернуть – War Doctor Aug 26 '17 at 17:59
@Igor, кто же его знает?) Так в задаче написано, скопировано, вставлено xDD – MedvedevDev Aug 26 '17 at 18:01

score 0 · Answer 3 · answered Aug 26 '17 at 20:07

Блин, ну зачем тут велосипеды придумывать? Все просто. Конкретно в данном примере код таков (используя 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);

...переменная acc_id и результат обработчика должны быть доступны за пределами самого обработчика т.к. в последующем возвращённое обработчиком значение переменной используется в другом месте кода... — War Doctor, Aug 26 '17 at 21:20

score 0 · Answer 4 · answered Aug 27 '17 at 07:34

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

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>

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

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

4 Answers4