重复功能

Question

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

  $('#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)");  
}); 

所以我不重复代码？

Answer 1

为您的按钮添加class，例如btn，然后您可以执行以下操作： -

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

Answer 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)");  
}); 

Answer 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)");
});

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

Answer 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