Форум

WarDoctor · #1 (**permalink**) 26.08.2017, 20:17

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

<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>

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

PS: просьба сильно не ругаться... сам знаю что затупил

рони · #2 (**permalink**) 26.08.2017, 20:25

WarDoctor,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
var prefix_acc = 'acc_';
$( '[id^="' + prefix_acc + '"]' ).on('click', function() {
$( "[data-debug]" ).text( [this.dataset.fname, this.id].join(' / ') );
});


});
  </script>
</head>

<body>
<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>

</body>
</html>

WarDoctor · #3 (**permalink**) 26.08.2017, 21:23

рони, спасибо.
желательно чтобы выводилось что-то одно. подскажите каким образом это сделать?
Переменная acc_id в последующем коде должна быть использована, поэтому проверка ее значения и вынесена за пределы обработчика т.к. есть функции где с этой переменной будут произведены преобразования

извините за вредность

рони · #4 (**permalink**) 26.08.2017, 21:34

WarDoctor,

Сообщение от WarDoctor

желательно чтобы выводилось что-то одно

$( "[data-debug]" ).text( [this.dataset.fname, this.id].join(' / ') );

заменить на

$( "[data-debug]" ).text( this.dataset.fname );

или на

$( "[data-debug]" ).text(  this.id);

WarDoctor · #5 (**permalink**) 27.08.2017, 00:22

Сообщение от рони

WarDoctor,

$( "[data-debug]" ).text( [this.dataset.fname, this.id].join(' / ') );

заменить на

$( "[data-debug]" ).text( this.dataset.fname );

или на

$( "[data-debug]" ).text(  this.id);

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

WarDoctor · #6 (**permalink**) 27.08.2017, 10:41

Решение найдено.
Спасибо за помощь в нахождении решения.

var prefix_acc = 'acc_';
$(function() {
  $('[id^="' + prefix_acc + '"]').click(function() {
    var id_acc = $(this).attr("id");
    //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>

laimas · #7 (**permalink**) 27.08.2017, 12:11

Сообщение от WarDoctor

Решение найдено.

Очень неразумное решение.

WarDoctor · #8 (**permalink**) 01.11.2017, 22:09

Сообщение от laimas

Очень неразумное решение.

Если это неразумно, то предложите свой вариант. Доброй рекомендацией всегда буду рад пополнить свои скудные знания...

laimas · #9 (**permalink**) 01.11.2017, 22:11

Сообщение от WarDoctor

Если это неразумно, то предложите свой вариант.

Ну наверное как-то иначе определять группы.

Форум

Справочник

Discord чат

Курсы javascript