我想隐藏每个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转换对他们或其他东西...