Jquery根据id号选择div

经过大量的研究后，我发现了JQuery并找不到我的问题的答案，因为我不知道如何表达它。

我的页面上有2个标尺+2个指南，2个按钮用于显示或隐藏它们。 我写了一些有用的东西，但我希望通过缩短代码来优化代码。

这里是：

$('#ruler-bg1, #ruler-bg2').hide(); $('#ruler1').click(function() { $('#ruler-bg1').slideToggle(100); $('#guide1').toggleClass('guide-on'); }); $('#ruler2').click(function() { $('#ruler-bg2').slideToggle(100); $('#guide2').toggleClass('guide-on'); }); 

我无法弄清楚的是如何对2个函数进行分组，以便点击#ruler-bg+same_number #ruler+number显示#ruler-bg+same_number和#guide+same_number 。

Answer 1

这样的事应该做​​：

 $('#ruler1, #ruler2').click(function(){ var num = this.id.substr(6); $('#ruler-bg' + num).slideToggle(100); $('#guide' + num).toggleClass('guide-on'); }); 

如果点击的元素和作用的元素之间存在某种结构关系，那可能会更好……

Answer 2

我会在所有“标尺”中添加一个类“标尺”，并使用id作为标尺-bg和指南上的标识符。

 $('.ruler').click(function(){ $('#bg-'+this.id).slideToggle(100); $('#guide-'+this.id).toggleClass('guide-on'); }); 

Answer 3

 initRuler(1); initRuler(2); function initRuler(id) { $('#ruler' + id).click(function() { $('#ruler-bg' + id).slideToggle(100); $('#guide' + id).toggleClass('guide-on'); }); }