Question

假设我有一个按钮（实际上有几个按钮），点击它时会做两件事之一。这两件事中的哪一件取决于传递给函数的参数。这将被全部使用所以我需要放入一个函数...而不是每次都在匿名函数中执行代码。我正在使用jquery，并想知道为点击处理函数提供参数和值的最佳方法是什么。另外，如果可能的话，我想保留对$(this)完整按钮的引用。这就是我所拥有的：

$(document).ready(function() {
   $('#button1').click({ labelStr: 'Open File' }, doLabel);
   $('#button2').click({ labelStr: 'Close Window' }, doLabel);
});

function doLabel(e) {
  console.log('it is: %o', e.data.labelStr);
  $(this).html(e.data.labelStr);
}

......哪个有效 - jsfiddel - 但我知道有很多方法可以让这只猫受伤。在这种方法中可以挖出什么洞？

Answer 1

像DelightedD0D建议的那样，我也会使用数据属性。您可以在事件处理程序中使用$（this）来引用元素，从而避免使用匿名函数。

$(document).ready(function() {
   $('button').click(doLabel);
});

function doLabel() {
  $(this).html($(this).data('label-str'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<button data-label-str="Open File">Give me a label please</button>
<p>&nbsp;</p>
<button data-label-str="Close Window">Give ME a label TOO please</button>

Answer 2

如果我理解正确，我只需将字符串作为数据属性添加到按钮上，然后将this发送给该函数。让函数使用this从按钮

中获取字符串

jsFiddle

＆＃13;

$(document).ready(function() {
   $('button').click(function(){doLabel(this)});
});

function doLabel(e) {
  $(e).html($(e).data('label-str'));
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<button data-label-str="Open File">Give me a label please</button>
<p>&nbsp;</p>
<button data-label-str="Close Window">Give ME a label TOO please</button>

＆＃13;

将参数传递给事件处理函数的最佳实践

2 个答案: