时间戳

首页 > 解决方案 > 如果数据属性匹配 jQuery，则隐藏 div

javascript - 如果数据属性匹配 jQuery，则隐藏 div

问题描述

简单的选项卡设置，如果相应的内容窗格为空，则尝试隐藏导航控件。我想使用数据属性（数据内容）来匹配元素。

内容窗格隐藏得很好，但导航控件没有。我错过了什么？我觉得我可能想多了...

jQuery; 如果内容选项卡为空，则根据匹配的数据属性隐藏相应的导航控件。

基本结构：

$('.tabs-content li').each(function(){
      if($.trim($(this).text()) == '' && $(this).children().length == 0){

		// hides content pane		
		$(this).hide(); 

		// should hide matching nav element
        if ($(this).attr('data-content')  == "data-content" ) {
            $('.tabs-navigation li').hide();
         }
		 
      }
    });
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
      <nav>
        <ul class="tabs-nav">
          <li><a href="#" data-content="tab1" class="selected">Tab 1</a></li>
          <li><a href="#" data-content="tab2">Tab 2</a></li>
          <li><a href="#" data-content="tab3">Tab 3</a></li>
        </ul> <!-- tabs-nav -->
      </nav>

      <ul class="tabs-content">
        <li data-content="tab1" class="selected">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li data-content="tab2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li data-content="tab3"> </li>
      </ul> <!-- tabs-content -->
    </div> <!-- tabs -->

小提琴：https ://jsfiddle.net/tpveuqsk/2/

标签： javascriptjquerycss

解决方案

你可以做的更简单，像这样：

$('.tabs-content li').each(function(){
    if ($(this).text().trim() == "" ) {
        $(this).hide();
        var data = $(this).attr("data-content")
        $(".tabs-nav a[data-content='"+data+"']").closest("li").hide()
     }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
  <nav>
    <ul class="tabs-nav">
      <li><a href="#" data-content="tab1" class="selected">Tab 1</a></li>
      <li><a href="#" data-content="tab2">Tab 2</a></li>
      <li><a href="#" data-content="tab3">Tab 3</a></li>
    </ul> <!-- tabs-nav -->
  </nav>

  <ul class="tabs-content">
    <li data-content="tab1" class="selected">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li data-content="tab2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li data-content="tab3"> </li>
  </ul> <!-- tabs-content -->
</div> <!-- tabs -->

推荐阅读