Javascript 显示/隐藏 Div + 在列表项上添加类

Question

我有一个非常大的无序列表，目前包含 256 本书，每本书都有一个带有位置的关联列表项。

具有每本书关联位置的列表项在加载时隐藏，我想找出最好的方法，以便在单击列表中的每本书时，它显示关联的隐藏列表项，并且添加一个事件类。然后，如果单击另一本书，事件类将更改为该类，并且当新书淡入时，先前显示的位置将被隐藏。

目前我有一些 JS 可以执行此操作，尽管这意味着我每次都必须手动列出每本书和关联的位置以及它们自己的 ID——这意味着它会变成一个很长的列表，我相信有很多这样做更简单。

下面是我的(HTML)...

<ul> 
    <li id="book1">Book Title 1</li>
    <li id="location1" style="display:none;">Book 1's Location</li>

    <li id="book2">Book Title 2</li>
    <li id="location2" style="display:none;">Book 2's Location</li>

    <li id="book3">Book Title 3</li>
    <li id="location3" style="display:none;">Book 3's Location</li>
 </ul>

对于 JS...

    $("#book1").on('click', function() {

       $("#location1").fadeIn();
       $("#location2,#location3").fadeOut();

       $("#book1").addClass("active");
       $("#book2,#book3").removeClass("active");
   });


   $("#book2").on('click', function() {

      $("#location2").fadeIn();
      $("#location1,#location3").fadeOut();

      $("#book2").addClass("active");
      $("#book1,#book3").removeClass("active");

   });

   $("#book3").on('click', function() {

     $("#location3").fadeIn();
     $("#location1,#location2").fadeOut();

     $("#book3").addClass("active");
     $("#book1,#book2").removeClass("active");

  });

所有帮助将不胜感激，因为我是 JS 的新手并正在努力学习。非常感谢!

Answer 1

Working Fiddle

您可以通过使用类来引用所有 元素而不是使用 id 手动引用每个元素来实现这一点。

HTML:

<ul> 
    <li class="book">Book Title 1</li>
    <li class="location" style="display:none;">Book 1's Location</li>

    <li class="book">Book Title 2</li>
    <li class="location" style="display:none;">Book 2's Location</li>

    <li class="book">Book Title 3</li>
    <li class="location" style="display:none;">Book 3's Location</li>
</ul>

JavaScript:

$(".books").on('click', function() {
    // Remove active class from all book element
    $(".book").each(function(){
        $(this).removeClass("active");
    });

    // Fade out any visible location elements
    $(".location").each(function(){
        $(this).fadeOut();
    });

    // Add active class to the book element we just clicked on
    $(this).addClass("active");

    // Fade in its respective location element
    $(this).next(".location").fadeIn();
});