javascript - 根据另一组元素的类不断隐藏不同的元素

Question

我有一组菜单元素 <a>和一组 div元素(每个元素都包含一个 django 模板。目前有逻辑在 menu 元素之间切换“事件”类，具体取决于单击的元素(突出显示该单击的菜单项)。希望拥有它以便任何时候只有"active"菜单项对应的django模板是可见的。现有代码如下所示(目前只更改哪个菜单项具有"active"类):

<!-- top menu color activation -->
    <script>
        menu = {};

        // ready event
        menu.ready = function() {

          // selector cache
          var
            $menuItem = $('.menu a.item, .menu .item, .menu .link.item'),
            // alias
            handler = {
              activate: function() {
                $(this)
                .addClass('active')
                .closest('.ui.menu')
                .find('.item')
                .not($(this))
                .removeClass('active');
              }
            }
          ;

          $menuItem
            .on('click', handler.activate)
          ;

        };


        // attach ready event
        $(document).ready(menu.ready);

    </script>

    <!-- top menu (note, using semantic UI) -->
    <div class="ui container">
        <div class="ui large secondary red pointing menu">
            <a class="toc item">
                <i class="sidebar icon"></i>
            </a>
            <a class="active item">item-1</a>
            <a class="item">item-2</a>
            <a class="item">item-3</a>

            <div class="right menu item">
                <div class="ui simple dropdown">
                    More
                    <i class="dropdown icon"></i>
                    <div class="ui menu">
                        <a class="item"><i class="globe icon"></i> Choose Language</a>
                        <a class="item"><i class="settings icon"></i> Log Out</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- including corresponding django templates (currently all visible) -->
    <!-- would like only item-1.html to be visible when menu item 1 is active and similarly for the other templates here -->
    <div>{% include "testapp/item-1.html" %}</div>
    <div>{% include "testapp/item-2.html" %}</div>
    <div>{% include "testapp/item-3.html" %}</div>

我无法弄清楚的是如何隐藏哪个 django 模板在与当前事件菜单项相对应的任何给定时间当前可见(例如，用户单击 item-1 菜单项，然后仅 item-1 .html django 模板应该是可见的)。

如何使用 jQuery 获得这一功能？非常新 JS对于前端网页的东西，如果对代码措辞中不明显的任何内容有任何更长的解释，我将不胜感激。

Answer 1

我以更短且更易读的方式编写了您的代码。

$(document).ready(function(){
  var item = $('.menu .item');
  item.on("click",function(){
    item.removeClass("active");
    $(this).addClass("active");
  });
});

上面的代码与您的代码做的事情完全一样。

---

编辑
现在要根据该菜单点击显示特定的 div，您应该将一个类添加到您的"template"和一个数据属性，它可以使用 .data() 读取。

$(document).ready(function(){

  // Click handler.
  var item = $('.menu .item');
  item.on("click",function(){

    // Add the active class.
    item.removeClass("active");
    $(this).addClass("active");

    // Show the right Django template.
    var id = $(this).data("id");
    if(id!="" && typeof(id)!="undefined"){
      $(".template").hide();
      $(".template[data-id='"+id+"']").show();
    }
  }); // End click.

  // On load, only show the first template
  $(".template").hide();
  $(".template[data-id='1']").show();

}); // end ready.

.active{
  color:red;
}
.template{
  width:20em;;
  height: 8em;
  border: 1px solid black;
  box-shadow:inset 0 0 3em #fff;
  margin:1em;
}
.template:nth-child(3){
  background-color:#6AA;
}
.template:nth-child(4){
  background-color:#A6A;
}
.template:nth-child(5){
  background-color:#AA4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ui container">
  <div class="ui large secondary red pointing menu">
    <a class="toc item">
      <i class="sidebar icon"></i>
    </a>
    <a class="active item" data-id="1">item-1</a>
    <a class="item" data-id="2">item-2</a>
    <a class="item" data-id="3">item-3</a>

    <div class="right menu item">
      <div class="ui simple dropdown">
        More
        <i class="dropdown icon"></i>
        <div class="ui menu">
          <a class="item"><i class="globe icon"></i> Choose Language</a>
          <a class="item"><i class="settings icon"></i> Log Out</a>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="template" data-id="1">item-1.html</div>
<div class="template" data-id="2">item-2.html</div>
<div class="template" data-id="3">item-3.html</div>