javascript - 如何使用 jQuery 仅当其他元素包含某些内容时才显示元素？

Question

我的猜测是我想要实现的目标应该很容易，但是由于我缺乏前端开发知识，我无法解决问题。拥有一个与用户可以选择的 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>

需要隐藏整个DIV current-filters-box如果没有应用过滤器。

该页面使用了一个 Javascript 文件 bundle.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>

Answer 1

你的两个条件都不正确，或者我会说他们没有做你认为他们做的事情。
s.length将始终打印 undefined 所以而不是 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 = document.getElementById("current-filters")
console.log(s.children.length);
if (s.children.length < 1) {
  $('#current-filters-box').hide(1000)
}

<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>