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将始终打印未定义的内容，因此您可以使用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>

Answer 2

尝试一下。

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

    }

Answer 3

您正在执行作业，请尝试。

if (s.children.length)

Answer 4

使用原始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
}

Answer 5

您可以通过添加自己的变量来实现此目的，该变量可以计数或维护您应用的过滤器，例如

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

仅当其他元素包含某些使用jQuery的元素时，才如何显示该元素？

5 个答案:

没有过滤器

没有过滤器