3

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

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

这样我就不会重复代码？

4

4 回答 4

6

给你的按钮一个class, 例如btn, 然后你可以做类似的事情： -

$('.btn').click(function() {
  $('#' + this.id.replace('bt', 'txt')).show();
  $(this).css("background-image", "url(site_images/08/btn_over.png)"); 
});
于 2013-05-13T09:28:33.320 回答
3

您可以尝试使用属性 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)");  
});
于 2013-05-13T09:28:54.517 回答
1

这个怎么样，

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

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

于 2013-05-13T09:33:21.980 回答
0

使用多重选择器

$('#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()选择器：如何组合两个 jQuery 结果

于 2013-05-13T09:31:51.903 回答