Question

经过大量研究后，我发现了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+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');
  });
}

Jquery根据他们的id号选择div

3 个答案: