使用 .on("click"...) 获取点击按钮的 value/attr 作为 event.data

Question

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

设置如下：

从 "A" 到 "Z" 有 26 个 value/text 按钮作为按字母顺序排列的列表的控件。
每个按钮都有相同的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 以在函数内部使用。一切正常。

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

$(".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 个无线电输入/文本输入）来启动该功能，并且传递的值会使它变得复杂。

Answer 1

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

我重新创建了你的场景编辑 - 更新了 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));
    }
);

这里是工作示例link

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

使用 .on("click"...) 获取点击按钮的 value/attr 作为 event.data

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

javascript

jquery

events

button

attr

HTML

Javascript