Javascript 基于Jquery中的选择删除div

我有这个导航

<div class="col-3" id="record_nav">
  <ul>
    <li class="course-record selected" data-target="#upcoming"><span class="dot yellow"></span>Upcoming Week</li>
    <li class="course-record" data-target="#future"><span class="dot blue"></span>Further Weeks</li>
    <li class="course-record" data-target="#history"><span class="dot red"></span>History</li>
  </ul>
</div>

在我的jquery中，我让li元素添加和删除所选的类，根据所选的类来选择。这个很好用。但是当我试图显示和隐藏数据目标时，最终被删除的是选择的li元素本身。我不确定我做错了什么

  $('#record_nav ul li').on('click', function(e){
      $('#record_nav ul li.selected').removeClass('selected');
      $(this).addClass('selected');
      var $this=$(e.target);
      console.log(e.target);
      $(this).not($this.data('target')).hide();
      $(this).filter($this.data('target')).show(300);
  });

$（'record#nav ul li'）。在（'click'，函数（e）上{
$（'#记录导航ul li.selected'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
var$this=$（e.target）；
console.log（如target）；
$（this.not（$this.data（'target'））.hide（）；
$（this.filter（$this.data（'target'））.show（300）；
});
#未来{
显示：无；
}
#历史{
显示：无；
}
#即将到来{
显示：块；
}
.选定{
-webkit盒阴影：0px 4px 5px 0px rgba（0,0,0,0.35）；
-moz盒阴影：0px 4px 5px 0px rgba（0,0,0,0.35）；
盒影：0px 4px 5px 0px rgba（0,0,0,0.35）；
}


即将到来的一周
未来几周
历史

您可以将一个名为
content
的类关联到您要隐藏和显示的
div
中，以便我们可以使用此类选择器隐藏那些
div
。现在，您可以使用
.data（）
获取
数据目标
值并显示它：
$（'record#nav ul li'）。在（'click'，函数（e）上{
$（'#记录导航ul li.selected'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
$（'.content'）.hide（）；
var id=$（this.data（'target'）；
$（id.show（）；
});
#未来{
显示：无；
}
#历史{
显示：无；
}
#即将到来{
显示：块；
}
.选定{
-网络工具包盒阴影：0px 4px 5px 0px rgba（0,0,0,0.35）；
-moz盒阴影：0px 4px 5px 0px rgba（0,0,0,0.35）；
盒影：0px 4px 5px 0px rgba（0,0,0,0.35）；
}


即将到来的一周
未来几周
历史

一些内容即将发布
未来的一些内容
某些内容历史记录
您要删除哪些内容？仅仅是内部的
span
？那些css选择器意味着什么来影响页面的可见性？没有包含这些ID的元素。没有。这些单独的div包含包含内容的ID#即将到来的、#未来和#历史。您希望输出是什么样的？抱歉，我不认为我需要包含代码将更新！您可以在不使用附加内容类
$（$（$）li.course record”）.map（函数（）{return$（this.data（“target”）}.get（）.join（））.hide（）的情况下完成全部隐藏
@Steve为什么要有一个额外的自定义循环，因为我们可以通过添加一个类来简化代码。你的建议也很有用。我刚才提到了它，以防有人偶然发现你的答案，需要一个稍微不同的方法。
  $('#record_nav ul li').on('click', function(e){
      $('#record_nav ul li.selected').removeClass('selected');
      $(this).addClass('selected');
      var $this=$(e.target);
      console.log(e.target);
      $(this).not($this.data('target')).hide();
      $(this).filter($this.data('target')).show(300);
  });