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

Answer 2

你可以在一個容器

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

包裝所有元素使用事件代表團的jQuery

<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

我建議把位置塊作爲子元素裏，然後將下面的代碼將盡可能多的元素按照您放在頁面上：

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

享受！