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();
});

Answer 2

您可以使用jQuery的事件委派

$( elements ).on( events, selector, data, handler );

包装容器中的所有元素

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

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

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

然后为所有元素附加一个处理程序

var container = $('#container');
container.on('click', 'li', function(){
    if(container.data('prev'))
        container.data('prev').fadeOut();
    container.data('prev',$(this).next().fadeIn());     
});

Answer 3

Working jsfiddle

我建议将位置块作为li的子元素，然后以下代码将适用于您在页面上放置的元素：

HTML：

<ul>
    <li class="book js-book">
        Book Title 1
        <div class="js-location location">Book Location 1</div>
    </li>

    <li class="book js-book">
        Book Title 2
        <div class="js-location location">Book Location 2</div>
    </li>

    <li class="book js-book">
        Book Title 3
        <div class="js-location location">Book Location 3</div>
    </li>
</ul>

的javascript：

$( document ).ready( function ()
{
    var activeClass = 'active',
        sel = {
            book: '.js-book',
            location: '.js-location'
        }

    $( sel.book ).on( 'click', function ( event )
    {
        if ( $( this ).hasClass( activeClass ) )
        {
            return event.preventDefault(); // this code will prevent actions in case you will use <a> tag, or other elements instead of <li>
        }

        $( sel.location ).fadeOut();
        $( sel.book ).removeClass( activeClass );

        $( this ).addClass( activeClass );
        $( this ).find( sel.location ).fadeIn();
    } );
} );

CSS：

.location {
    display: none;
}

享受！

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

3 个答案: