我想隱藏每個div與點擊時的id相同的類名

Question

我遇到了編寫此jQuery代碼的問題。

我想要的是能夠點擊option-menu錨標記，並顯示div與同id的類名，所以當我點擊option1我就可以看到所有具有類option1的div

菜單

<ul class="inline option-menu"> 
       <li><a href="#" id="option1">option1</a></li> 
       <li><a href="#" id="option2">option2</a></li> 
       <li><a href="#" id="option3">option3</a></li> 
    </ul> 


      <div class="cover option1"> 
        <p>test 1</p> 
      </div> 
    <div class="cover option3"> 
        <p>test 2</p> 
      </div> 
    <div class="cover option2"> 
        <p>test 3</p> 
      </div> 
    <div class="cover option1"> 
        <p>Tester 4</p> 
      </div> 
    <div class="cover option2"> 
        <p>test 5</p> 
      </div> 
    <div class="cover option1"> 
        <p>test 6</p> 
      </div> 
    <div class="cover option3"> 
        <p>test 7</p> 

Answer 1

你可以得到所有那些id S中的元素通過使用attribute-starts-with選擇與option開始：

$("[id^=option]") 

可以使用.on("click", ...或只是.click(...

在該處理程序，this是被點擊的DOM元素在他們處理的點擊，所以你可以使用this.id，以獲取其id。

您可以使用. followed by the id找到相關類的元素。

由於您要隱藏的所有選項都有類別cover，因此可以很容易地隱藏它們，然後顯示（或過濾）要顯示的選項。

所以：

$("[id^=option]").on("click", function() { 
    // Hide all 
    $(".cover").hide(); 

    // Then show the ones that match this `id` 
    $("." + this.id).show(); 
}); 

或者，如果您要添加和刪除經常的選擇，可能是更好的使用授權版本：如果你願意，你可以使用票友有點

$(document).on("click", "[id^=option]", function() { 
    // Hide all 
    $(".cover").hide(); 

    // Then show the ones that match this `id` 
    $("." + this.id).show(); 
}); 

.not以避免不當地隱藏元素：

$(document).on("click", "[id^=option]", function() { 
    var selectorToShow = "." + this.id; 

    $(".cover").not(selectorToShow).hide(); 

    // Then show the ones that match this `id` 
    $(selectorToShow).show(); 
}); 

通常情況下，沒關係，但如果你有CSS轉換對他們或其他東西...