Question

因此，为了在我的网站中显示和隐藏某些DIV标记，我得到了以下代码

$('#ONE').live('click', function () {
    $('.hide').css('display', 'none');
    $('#b-ONE').css('display', 'block');
});
$('#TWO').live('click', function () {
    $('.hide').css('display', 'none');
    $('#b-TWO').css('display', 'block');
});

点击div名称“ONE”打开某个“b-ONE”div，依此类推。它完美无缺，但是当列表变长时会很痛苦。你在JS中看到“ONE”和“TWO”的位置......有什么方法可以把这些“ONE”和“TWO”变成变量，所以我最多可以有40个div而且不需要为每个DIV输入上面的代码，并且有一个时髦的代码，我只需要用变量输入一次这个代码？

我正在研究这样的事情，但缺乏深入的JS / jQuery知识：

$('#VARIABLETEXT').live('click', function () {
    $('.hide').css('display', 'none');
    $('#b-VARIABLETEXT').css('display', 'block');
});

点击名为“TWENTYONE”的div显示div“b-TWENTYONE”

非常感谢任何帮助！

Answer 1

在为要更改的元素构建选择器时，只需使用所单击元素的id：

$('#ONE, #TWO, #THREE').live('click', function () {
    $('.hide').css('display', 'none');
    $('#b-' + this.id).css('display', 'block');
    // ^^^^^^^^^^^^^^
});

通过为所有这些元素提供相同的类属性，然后使用"#ONE, #TWO, #THREE"，可以更好地编写初始选择器（.the-class）。

可能还有结构方法，但由于您没有引用HTML，因此无法说出来。

旁注：live函数不仅被弃用，而且实际上是从最近的jQuery版本中删除的。这是最新的等价物：

$(document).on('click', '#ONE, #TWO, #THREE', function () {
    $('.hide').css('display', 'none');
    $('#b-' + this.id).css('display', 'block');
    // ^^^^^^^^^^^^^^
});

美元哈希和变量 - $（'＃

1 个答案: