代码之家 › 专栏 › 技术社区 › Dirk J. Faber

如何使用jQuery仅在其他元素包含某些内容时显示元素?

ajax html jquery javascript

Dirk J. Faber · 技术社区 · 7 年前

我想我想实现的目标应该很容易,但由于我对前端开发缺乏了解,我无法解决这个问题。有一个使用AJAX过滤器的页面,用户可以选择。当前应用的筛选器显示在 <div> 具有 id=current-filters .

HTML如下所示:

<div id="current-filters-box">
    <div style="margin-bottom: 15px">
        <strong>Current filters:</strong>
        <div id="current-filters">
        <!-- here every single applied filter is displayed -->
        </div>
    </div>
</div>

current-filters-box 如果没有应用过滤器。

页面使用Javascript文件, 捆绑包.js 它是巨大的,但包含以下行:

s=document.getElementById("current-filters")

因此,尝试使用以下if语句隐藏DIV:

if(s.length<1)$('#current-filters-box').hide()

和

if(s=0)$('#current-filters-box').hide()

Demo of page can be found here

编辑:这是应用过滤器时HTML的外观:

<div id="current-filters-box">
<div style="margin-bottom: 15px">
    <strong>Current filters:</strong>
    <div id="current-filters">
        <div class="badge-search-public">
            <strong>Humanities &amp; Languages</strong> <span class="x" data-property="disciplines" data-value="4" onclick="filter.removeFilter(this)">Ã</span>
        </div>
        <div class="badge-search-public">
            <strong>January</strong> <span class="x" data-property="months" data-value="1" onclick="filter.removeFilter(this)">Ã</span>
        </div>
    </div>
</div>

5 回复 | 直到 7 年前

Gangadhar Jannu 7 年前

你的两个条件都不正确,否则我会说他们没有做你认为他们做的事。
s.length 将始终打印未定义的 s.length<1 你可以利用 s.children.length

s==0 // condition
s=0 //assignment

您的要求的正确条件是

if(s.children.length<1){

我已经指定了一些片段作为说明。

s = document.getElementById("current-filters")
console.log(s.children.length);
if (s.children.length < 1) {
  $('#current-filters-box').hide(1000)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="current-filters-box">
  filter box
  <div style="margin-bottom: 15px">
    <strong>Current filters:</strong>
    <div id="current-filters">
      <!-- here every single applied filter is displayed -->
    </div>
  </div>
</div>

无过滤器

s=文档.getElementById(“电流滤波器”)
控制台.logs.s。儿童.长度);
}

<div id="current-filters-box">
  <div style="margin-bottom: 15px">
    <strong>Current filters:</strong>
    <div id="current-filters">
      <div class="badge-search-public">
        <strong>Humanities &amp; Languages</strong> <span class="x" data-property="disciplines" data-value="4" onclick="filter.removeFilter(this)">Ã</span>
      </div>
      <div class="badge-search-public">
        <strong>January</strong> <span class="x" data-property="months" data-value="1" onclick="filter.removeFilter(this)">Ã</span>
      </div>
    </div>
  </div>

Shubham Dixit 7 年前

if( $('#current-filters').is(':empty') ) {
    $('#current-filters-box').hide()// or $('#current-filters-box').css("display","none")

    }

spinners 7 年前

你在执行任务,试试。。

if (s.children.length)

AndrewL64 7 年前

使用普通JavaScript,您可以检查 current-filters div是否为空,并切换父div current-filters-box 这样地:

s= document.getElementById("current-filters");
t= document.getElementById("current-filters-box");

if(s.children.length<1) {
    t.style.display = 'none';
    // t.style.visibility= 'hidden'; <<-- use this if you want the div to be hidden but maintain space
}
else {
    t.style.display = 'block';
    // t.style.visibility= 'visible'; <<-- use this if you used visibility in the if statement above
}

Arjun 7 年前

您可以通过添加自己的变量来实现这一点,该变量对应用的过滤器进行计数或维护,例如。

var applied_filter_count = 0;

applied_filter_count++;
if(applied_filter_count) {
   $('#current-filters-box').show()
}

每次移除过滤器时

applied_filter_count--;
if(!applied_filter_count) {
   $('#current-filters-box').hide()
}

current-filters-box 应该是 display:none