时间戳

首页 > 解决方案 > 仅当值大于 1 Jquery 时才显示 div

javascript - 仅当值大于 1 Jquery 时才显示 div

问题描述

如果变量中的值大于 1，我只想显示我的 div colorCount。到目前为止，我的代码并没有基于此隐藏 div。我已经创建了代码JSFIDDLE 

$(document).ready(function() {

     $('.search').each(function(index, item) {
            var colorCount = $(item).find('.item-colours-result ul li').length;
            $(item).attr('data-search-position', colorCount);

            if (colorCount < 0 ) {

                $('.numberOfColours').hide();
            } else {
                $(this).find('.numberOfColours').html('<b>' + colorCount + '&nbsp;' + 'Colours available</b>').show();

            }
        });
    });

所以如果<ul>没有<li>div 不应该显示。

我这样做对吗？

标签： javascriptjqueryhtml

解决方案

  1. colorCount 应 < 1 或 <= 0
  2. 隐藏是泛化的，需要具体到只隐藏目标div。

$(document).ready(function() {
    $('.search').each(function(index, item) {
        var colorCount = $(item).find('.item-colours-result ul li').length;
        $(item).attr('data-search-position', colorCount);

        if (colorCount < 1 ) {
            $(this).find('.numberOfColours').hide();
        } else {
            $(this).find('.numberOfColours').html('<b>' + colorCount + '&nbsp;' + 'Colours available</b>').show();

        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="result-item-1" class="search" data-search-position="1" style="width: 50%;">
<div class='item-colours-result'>
<ul class=""><li>1</li><li>2</li></ul>
</div>
<div class="numberOfColours">Test</div>
</div>



<div id="result-item-2" class="search" data-search-position="2" style="width: 50%;">
<div class='item-colours-result'>
<ul class=""><li>1</li><li>2</li><li>3</li></ul>
</div>
<div class="numberOfColours">Test</div>
</div>


<div id="result-item-3" class="search" data-search-position="3" style="width: 50%;">
<div class='item-colours-result'>
<ul class=""><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</div>
<div class="numberOfColours">Test</div>
</div>


<div id="result-item-4" class="search" data-search-position="4" style="width: 50%;">
<div class='item-colours-result'>
<ul class=""></ul>
</div>
<div class="numberOfColours">Test</div>
</div>

推荐阅读