Question

我想自动将列表项转换为页面中元素的jQuery切换。

例如，以下是一些示例页面代码：

<div id="page">
    <div id="menu">
        <ul>
            <li class="books">Books</li>
            <li class="cars">Cars</li>
            <li class="sausages">Sausages</li>
        </ul>
    </div>

    <div id="elements">
        <div class="books">This layer displays a range of books</div>
        <div class="cars">This layer displays a range of cars</div>
        <div class="sausages">This layer displays a range of sausages</div>
    </div>
</div>

如您所见，每个菜单列表项和每个元素DIV共享相同的类名。

我想用jQuery实现的是将每个菜单列表项自动转换为切换，然后可以在元素部分切换其相应的DIV。

所以它基本上需要读取菜单项，然后查看该菜单项是否具有相应的元素图层，如果是，则将其转换为可以切换图层的切换。

它需要是动态的，因为菜单项和元素图层可能会定期添加和删除，最终可能会包含数十个图层。

如果可以，请用jsFiddle演示。

谢谢！

编辑：我知道如何使用jQuery隐藏和显示页面上的特定元素，在那里您将元素名称硬编码到代码中，但是，我不知道如何使其动态化。在发布此处之前，我尝试使用谷歌搜索至少2个小时。

Answer 1

上述评论者是正确的，您应该在帖子中投入更多精力。除了SO不是“do my homework for me”网站之外，我的描述很难理解。一些代码 - 甚至是伪代码 - 会有所帮助。

但是，我确实理解，有时我们甚至不知道我们不知道什么，这使我们的问题很难沟通。因此，虽然我很难理解你想要什么，但如果我正确地阅读它，那么这样的事情应该有效：

<强> HMTL

<div id="page">
    <div id="menu">
        <ul>
            <li class="books">Books</li>
            <li class="cars">Cars</li>
            <li class="sausages">Sausages</li>
        </ul>
    </div>
    <hr />
    <div id="elements">
        <div class="books">This layer displays a range of books</div>
        <div class="cars">This layer displays a range of cars</div>
        <div class="sausages">This layer displays a range of sausages</div>
    </div>
</div>

<强>的Javascript

$('#menu ul li').on('click', function () {
    var $matchingDIV = $('#elements div.' + $(this).attr('class'));

    $matchingDIV.toggle(!$matchingDIV.is(':visible'));
});

以下是Fiddle

如果您为LI元素添加多个类名，它将落在哪里。另外，我不知道你是否想要元素开始显示，或者是否一次只能显示一个元素，等等。希望你能接受它并运行它，但是如果你对它有疑问，请问。< / p>

jQuery - 动态地将列表项转换为jQuery Toggles

1 个答案: