javascript - 美元哈希和变量 - $('#

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 中说“一个”和“两个”的地方......有什么办法可以把这些“一个”和“两个”变成变量，所以我最多可以有 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") 可以通过为所有这些元素赋予相同的类属性，然后使用 来更好地编写。类。

可能还有一种结构化的方法，但是由于你没有引用你的HTML，所以不可能说。

---

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

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