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

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。

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

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

如果这是可能的，请用jsFiddle演示。

谢谢！

编辑：我知道如何使用jQuery来隐藏和显示页面上的特定元素，其中您将代码元素名称硬编码到代码中，但是，我不知道如何使其变为动态。在这里张贴之前，我尝试了至少2个小时的Google搜索。

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

它会跌倒的地方是if您可以为LI元素添加多个类名称。另外，我不知道你是否想要元素开始展示，或者每次只展示一个元素，等等。希望你可以把它和它一起运行，但是如果你有问题，请问。