重复功能答案

【问题标题】：Repeating functions重复功能
【发布时间】：2013-05-13 17:39:36
【问题描述】：

在编写简单的代码时，我似乎重复了很多功能，有没有更好的方法？

  $('#bt1').click(function() {
      $('#txt1').show();
      $(this).css("background-image", "url(site_images/08/btn_over.png)");  
}); 

  $('#bt2').click(function() {
      $('#txt2').show();
      $(this).css("background-image", "url(site_images/08/btn_over.png)");  
}); 

  $('#bt3').click(function() {
      $('#txt3').show();
      $(this).css("background-image", "url(site_images/08/btn_over.png)");  
}); 

  $('#bt4').click(function() {
      $('#txt4').show();
      $(this).css("background-image", "url(site_images/08/btn_over.png)");  
});

这样我就不重复代码了吗？

【问题讨论】：

标签： jquery

【解决方案1】：

给你的按钮一个class，比如btn，然后你可以做这样的事情：-

$('.btn').click(function() {
  $('#' + this.id.replace('bt', 'txt')).show();
  $(this).css("background-image", "url(site_images/08/btn_over.png)"); 
});

【讨论】：

如果我说得对，这不会涵盖用户想要显示的不同文本... #txt1 .. #txt[n]
@LukasGreso 确实如此。它获取被点击按钮的 ID（例如 bt1），然后将 bt 部分替换为 txt 以获取要显示的关联文本的 ID；它是事件处理函数的第一行。
是的，是的，我明白了......对不起:)

【解决方案2】：

你可以尝试使用attribute Starts With Selector:

$("[id^='bt']").click(function() {
      var number = $(this).prop('id').slice(-1);
      $('#txt' + number).show();
      $(this).css("background-image", "url(site_images/08/btn_over.png)");  
});

【讨论】：

谢谢！很高兴看到一些不同的方法
@pouki06 您可以轻松地使用正则表达式来获取最后一个数字:)

【解决方案3】：

这个怎么样，

$('#bt1,#bt2,#bt3,#bt4').click(function () {
    var number = this.id.replace( /^\D+/g, '');
    $('#txt'+number).show();
    $(this).css("background-image", "url(site_images/08/btn_over.png)");
});

注意：如果您可以为所有需要点击的项目添加一个类，那就更好了。然后选择器将更改为类名。其余代码相同

【讨论】：

如果他们添加新元素，那就不能很好地扩展，并且仍然需要他们单独列出它们。
@AnthonyGrist，希望你也能看到注释
我可以，但是当我写评论时它不存在。如果您知道这是更好的解决方案，为什么您会建议另一种解决方案？
代码示例正在运行，无需对 dom 进行任何更改。但如果他可以改变 dom，他可以选择第二个选项。

【解决方案4】：

使用Multiple Selector

$('#bt1, #bt2, #bt3, #bt4').click(function () {
    var number = this.id.replace( /^\D+/g, '');
    $('#txt'+number).show();
    $(this).css("background-image", "url(site_images/08/btn_over.png)");
});

您也可以 .add() 选择器：How to combine two jQuery results

【讨论】：