Question

我在编写这个jQuery代码时遇到了问题。

我想要的是能够点击option-menu锚标记，并显示div的同名id的类名，以便点击option1我和＃39;我将能够看到所有具有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

您可以使用attribute-starts-with选择器获取id以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过渡或其他东西......

我想隐藏每个div，其名称与点击时的id相同

1 个答案: