重复功能

当编码简单的东西时，我似乎重复了很多功能，有没有更好的方法来做到这一点？重复功能

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

这样我就不重复代码？

来源

2013-05-13 Ma9ic

给你的按钮的class，如btn，然后你可以这样做： -

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

来源

2013-05-13 09:28:33 billyonecan

如果我连接它的权利，这不包括用户想要显示的不同文本...＃txt1 .. #txt [n] – 2013-05-13 09:34:43

@LukasGreso它的确如此。它取得被点击的按钮的ID（例如'bt1'），然后用'txt'替换'bt'部分以获得显示的关联文本的ID;它是事件处理函数的第一行。 – 2013-05-13 09:36:16

是的，我看到...对不起:) – 2013-05-13 09:36:48

你可以尝试使用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)"); 
});

来源

2013-05-13 09:28:54 Eli

谢谢！很高兴看到几种不同的方法 – Ma9ic 2013-05-13 09:33:35

注意，这个只适用于0到9的数字... – Pouki 2013-05-13 09:43:48

@ pouki06你可以很容易地使用正则表达式来获得最后一个数字:) – Eli 2013-05-13 09:44:44

使用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

来源

2013-05-13 09:31:51

这个怎么样，

$('#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-13 09:33:21

如果它们添加新元素并不能很好地延伸，并且仍然要求它们单独列出它们。 – 2013-05-13 09:36:34

@AnthonyGrist，希望你也可以看到注释 – 2013-05-13 09:37:17

我可以，但是当我写评论时，它不在那里。如果你意识到这是更好的解决方案，为什么你会建议一个不同的？ – 2013-05-13 09:39:23

回答

相关问题