Jquery根据他们的id号选择div答案

【问题标题】：Jquery selecting divs based on their id numberJquery根据他们的id号选择div
【发布时间】：2011-03-27 18:17:58
【问题描述】：

我正在发现 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');
});

我不知道如何对这两个函数进行分组，因此单击 #ruler+number 会显示 #ruler-bg+same_number 和 #guide+same_number。

【问题讨论】：

标签： jquery css-selectors

【解决方案1】：

应该这样做：

$('#ruler1, #ruler2').click(function(){
    var num = this.id.substr(6);

    $('#ruler-bg' + num).slideToggle(100);
    $('#guide' + num).toggleClass('guide-on');
});

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

【讨论】：

hmmm，在这种情况下有效，虽然对于较大的索引值不能很好地扩展，虽然速度慢一些，但正则表达式可能更易于维护/可扩展。
@davin “更大的索引值”是什么意思？如果有更多 ruler# 元素，最好给它们一个类和一个 id 并使用类选择器。
如果有超过 10 的索引，substr 会认为 11 和 1 是等价的："#ruler11".substr(-1) === "#ruler1".substr(-1) 虽然您可以使用 "#ruler" 的长度从字符串的开头开始 substr ，再一次，它不像正则表达式那样可扩展
太棒了！谢谢你。想看懂代码，请问这是什么意思：var num = this.id.substr(-1);?
@davin 此处的正则表达式将是矫枉过正，并且不比删除前 6 个字符更可靠。不过，我已将其更改为这种方法，因为您的观点是有效的。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

initRuler(1);
initRuler(2);

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

【讨论】：