Javascript 如果div数小于2，如何禁用文本_Javascript_Jquery_Html

Javascript 如果div数小于2，如何禁用文本

javascript jquery html

Javascript 如果div数小于2，如何禁用文本,javascript,jquery,html,Javascript,Jquery,Html,有一个元素列表，我在单击“更多”按钮时展开每个元素，在单击“更少”按钮时折叠每个元素。但我的问题是：如果类名为“uner sch”的div只有2，我想隐藏更多按钮。再把那个按钮拿出来。这是我的密码： <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> .hidi{

有一个元素列表，我在单击“更多”按钮时展开每个元素，在单击“更少”按钮时折叠每个元素。但我的问题是：如果类名为“uner sch”的div只有2，我想隐藏更多按钮。再把那个按钮拿出来。这是我的密码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.hidi{
    height:20px;
    overflow:hidden;
    border:1px solid red;
}
</style>
</head>

<body>
<div class="container">
    <div class="hidi">
        <div class="uner-sch">
        1
        </div>
        <div class="uner-sch">
         2
        </div>
        <div class="uner-sch">
        3
        </div>

          <div class="uner-sch">
        5
        </div>


    </div>
    <div class="more"> ... More +</div>
</div>

<div class="container">
    <div class="hidi">
        <div class="uner-sch">
        1
        </div>
        <div class="uner-sch">
         2
        </div>
    </div>
    <div class="more"> ... More +</div>
</div>
<script>
var curHeight = $('.hidi').height();
$(".more").click(function(){
    var container = $(this).parent('.container');
    var el = container.find('.hidi');
    var autoHeight = el.css('height', 'auto').height();
    if(el.hasClass('open')){
        el.removeClass('open');
        el.height(autoHeight).animate({height: curHeight}, 1000), $(this).text('... less -');
    }
    else{
        el.addClass('open');
        el.height(curHeight).animate({height: autoHeight}, 1000), $(this).text('... more +');
    }
});
</script>

</body>
</html>


hidi先生{
高度：20px；
溢出：隐藏；
边框：1px纯红；
}
1.
2.
3.
5.
... 更多+
1.
2.
... 更多+
var curHeight=$（'.hidi'）.height（）；
$（“.more”）。单击（函数（）{
var container=$（this.parent（'.container'）；
var el=container.find（'.hidi'）；
var autoHeight=el.css（'height'，'auto'）.height（）；
如果（el.hasClass（'open'））{
el.移除类（“打开”）；
高度（autoHeight）.animate（{height:curHeight}，1000），$（this.text（“…less-”）；
}
否则{
el.addClass（“开放”）；
高度（curHeight）.animate（{height:autoHeight}，1000），$（this.text（“…更多+”）；
}
});

试试这个：

$('.more').prop('disabled', $('div.hidi').length < 2));

$（'.more'）.prop（'disabled'，$（'div.hidi'）.length<2））；

您可以在自定义样式元素的循环中使用addClass或removeClass来调整“hidi”div的高度

var curHeight=$（'.hidi'）.height（）；
$（“.more”）。单击（函数（）{
var container=$（this.parent（'.container'）；
var el=container.find（'.hidi'）；
var autoHeight=el.css（'height'，'auto'）.height（）；
如果（el.hasClass（'open'））{
el.移除类（“打开”）；
高度（autoHeight）.animate（{height:curHeight}，1000），$（this.text（“…less-”）；
}
否则{
el.addClass（“开放”）；
高度（curHeight）.animate（{height:autoHeight}，1000），$（this.text（“…更多+”）；
}
});
$（文档）.ready（函数（）{
$（'.container'）。每个（函数（）{
如果（$（this）.find（'.uner sch'）。长度>2）{
$（this.find（'.more'）.show（）；
}否则{
$（this.find（'.more'）.hide（）；
}
});
});
.hidi{
高度：20px；
溢出：隐藏；
边框：1px纯红；
}

1.
2.
3.
5.
... 更多+
1.
2.
... 更多+
1.
2.
3.
... 更多+
1.
... 更多+
我已经修改了您的jQuery代码
$(document).ready(function () {
    var curHeight = $('.hidi').height();
    $(".more").click(function () {
        //count number of divs with class `uner-sch`
        var numOfDivs = $('.uner-sch').length;

        if (numOfDivs < 2){
            $('.more').prop('disabled', true);
        }

        var container = $(this).parent('.container');
        var el = container.find('.hidi');
        var autoHeight = el.css('height', 'auto').height();
        if(el.hasClass('open')){
            el.removeClass('open');
            el.height(autoHeight).animate({height: curHeight}, 1000), $(this).text('... less -');
        }
        else{
            el.addClass('open');
            el.height(curHeight).animate({height: autoHeight}, 1000), $(this).text('... more +');
        }
    });

});

$（文档）.ready（函数（）{
var curHeight=$（'.hidi'）.height（）；
$（“.more”）。单击（函数（）{
//计算“uner sch”类的div数`
var numodivs=$（'.uner sch'）.length；
if（numOfDivs<2）{
$（'.more'）.prop（'disabled'，true）；
}
var container=$（this.parent（'.container'）；
var el=container.find（'.hidi'）；
var autoHeight=el.css（'height'，'auto'）.height（）；
如果（el.hasClass（'open'））{
el.移除类（“打开”）；
高度（autoHeight）.animate（{height:curHeight}，1000），$（this.text（“…less-”）；
}
否则{
el.addClass（“开放”）；
高度（curHeight）.animate（{height:autoHeight}，1000），$（this.text（“…更多+”）；
}
});
});

试试这个代码，让我知道它是否对你有效
我希望这会有所帮助。谢谢。
$（'#textbox'）.prop（'disabled'，$（'myDivs'）。长度<2））@Tushar如果div的长度小于2，我想禁用“more..”按钮，只需更改选择器即可。@Tushar我更改了选择器，但没有工作。如果类名为hidi的每个容器中的div小于2，我想禁用“更多”按钮。对于每个容器，您需要迭代所有容器，如果其中任何容器的元素少于2个。hidi
元素，请禁用它。这对我不起作用。例如：在您的代码中，我想删除第二部分中的更多按钮。