Question

我有3个div。默认情况下隐藏2个。通过点击链接＆＃34;添加＆＃34;或链接＆＃34;删除＆＃34;，我希望显示或隐藏其他div。然后，我想计算显示的动态div。

这是我的HTML：

<div id="clone1" class="billet">
    <input type="text" /><span id="test"></span>
</div>

<div id="clone2" class="billet" >
    <input type="text" />
</div>

<div id="clone3" class="billet" >
    <input type="text" />
</div>

<div id="ajout-suppr">
    <a href="javascript:;" class="ajoutBillet" >Ajouter un billet</a>
    <span>-------------</span>
    <a href="javascript:;" class="supprBillet" >Supprimer un billet</a>
</div>

jQuery：

$(document).ready(function () {

    $(".supprBillet").hide();
    $("#clone2").hide();
    $("#clone3").hide();


    $(".ajoutBillet").click(function (){
        var nb = $('.billet:not([style*="display: none"])').size();
        $('#test').html(nb);
        if(nb < 2) {
            $(".supprBillet").hide();
        }
        else {
            $(".supprBillet").show("slow");
        }

        if($("#clone2").hide()) {
            $("#clone2").show("slow");
        }

        if($("#clone3").hide() && $("#clone2").show()) {
            $("#clone3").show();
        }

        if($("#clone3").show() && $("#clone2").show()) {
            $(".ajoutBillet").hide("slow");
        }
    }); // fin du click function ajout billet


        $(".supprBillet").click(function (){
            var nb = $('.billet:not([style*="display: none"])').size();

            if(nb < 2) {
                $(".supprBillet").hide();
            }
            else {
                $(".supprBillet").show();
            }

            if($("#clone2").show() && $("#clone3").hide()) {
                $("#clone2").hide();
            }

    }); // fin du click function suppr billet


});

因为你看不出任何作品。你能告诉我一个问题吗？提前谢谢。

Answer 1

you can try something like this:    

jQuery('.ajoutBillet').on('click',function(){

        var lengthDivs = jQuery('.billet:visible').length;
        if(lengthDivs < 2 && jQuery('.supprBillet:visible').length > 0){
            jQuery('.supprBillet').hide();
        }
    });

Answer 2

我把它变成fiddle。这似乎做了预期（通过代码）。你在引用jquery库吗？

我确实通过查看1

对您的点数进行了一些更改

if(nb < 1) {
    $(".supprBillet").hide();
}

Answer 3

现在显示并隐藏输入：

＆＃13;

$(document).ready(function() {
  
    $(".billet input:nth-child(1)").hide();
    $(".billet input:nth-child(2)").hide();

    $("#new").click(function() {
        var count = 0;
        $(".billet input").each(function() {
            if ($(this).is(":visible")) {
              count++;
            }
        });
      
        $(".billet input:nth-child("+count+")").show();
        if ($("#total-divs").html() < 3) {
          $("#total-divs").html(count+1);
        }
    });
  
    $("#delete").click(function() {
        var count = -1;
        $(".billet input").each(function() {
            if ($(this).is(":visible")) {
              count++;
            }
        });
      
        if (count > 0) {
          $(".billet input:nth-child("+count+")").hide();
          $("#total-divs").html(count);
        }

    });
  
});

＆＃13;

input {
    margin: 4px 0;
    width: 100%;
}

.actions {
    display: block;
    text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="billet" >
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

<div class="actions">
    <a href="#" id="new">New</a> | <a href="#" id="delete">Delete</a>
</div>
Total: <span id="total-divs">1</span>

＆＃13;

Answer 4

您需要通过jquery .is（＆＃39;：visible＆＃39;）函数检查可见div。像这样：

替换此

var nb = $('.billet:not([style*="display: none"])').size();

用

var nb = $('.billet').is(":visible").length;

如何动态计算div显示块？

4 个答案: