获取点击按钮的值/attr作为event.data，带有.on(“点击”…）

Get value/attr of clicked button as event.data with .on("click"...)

本文关键字：on 带有 点击 data event 按钮 作为 attr 获取      更新时间：2023-09-26

我需要获取单击按钮的值或任何其他属性，才能将其用作函数中的event.data。

这是设置：

  • 有26个按钮，其值/文本从"A"到"Z"，作为按字母表列出的列表的控件
  • 每个按钮都有相同的class="byalpha"
  • 每个按钮启动相同的ajax搜索函数，该函数从sql中获取json数据以生成列表
  • 通过单击class="byname"的按钮，应将唯一值（例如"B"）作为event.data.letter传递给函数

我可以使用无线电输入和其他东西来控制这个功能：

$( "input[name=selectdept]" ).on ("click", {  searchdept: function (){ return $( "input[name=selectdept]:checked" ).val()}}, startsearch );

因此，如您所见，单击输入会激发function(startsearch)，并将输入的值作为event.data.searchdept在函数中使用。一切正常。

但试着用按钮是让我发疯。我尝试了我只能想象的一切。由于我必须通过类而不是唯一的名称或id来获得按钮，所以我不能像使用无线电输入那样使用。我尝试使用$(this)获取任何属性。但只是提出了"未定义"。我的一些方法：

$(".byname").on ("click", {letter: $(this).attr('value')}, searchdept );

或

$(".byname").on ("click", {letter: function(){ return $(this).attr("value")}}, searchdept );

或任何类型的

.val()  // .attr() // .text() // .html()  .... you name it

在这里的某个地方，我发现"event.target.value"可以提供正确的值（例如按钮B的"B"），但在我的功能上下文中不是一个好的解决方案，因为总共有3种不同的方式（26个按钮/4个单选输入/文本输入）来启动该功能，而提供的值会使其变得复杂。

你好，我真的不明白你在这里想做什么，但我猜你想得到你为每个按钮设置的数据变量的值。

我重新创建了你的场景EDIT-更新了Javascript代码，现在它似乎可以按照您的要求工作

HTML

$('.byalpha').on('click', {
    'letter': function(element) {
      return $(element).data('letter');
    }
  },
  function(e) {
    $('#picked_letter').html(e.data.letter(this));
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="byalpha" type='button' value='A' data-letter="a" />
<input class="byalpha" type='button' value='B' data-letter="b" />
<input class="byalpha" type='button' value='C' data-letter="c" />
<input class="byalpha" type='button' value='D' data-letter="d" />
<input class="byalpha" type='button' value='E' data-letter="e" />
<hr/>
<div>
  <span>Letter : </span>  <span id="picked_letter"></span>
</div>
<hr/>

Javascript

$('.byalpha').on('click', 
    {'letter': function (element) {
            return $(element).data('letter');
        }
    }, 
    function (e) {
        $('#picked_letter').html(e.data.letter(this));
    }
);

这是工作样品的链接

http://jsfiddle.net/70fje1mh/2/

相关文章：