Question

所以这是我的jsfiddle，我想在那里：

点击.original div后，将其复制，其中重复项将包含.black个课程，而不是.original。
如果.container包含多个类.black

到目前为止，我让前者工作，但后者似乎不起作用。是因为内容是用jQuery创建的吗？

<div class="container">
    <div class="original"></div>
</div>

.original {
    display: block;
    height:50px;
    width: 50px;
    margin: 10px;
    background: red;
}
.black {
    display: block;
    height:50px;
    width: 50px;
    margin: 10px;
    background: black;
}

$('.container').on('click', '.original', function () {
    $(this).clone(true).addClass('black').insertAfter($(this)).removeClass('original');
});
$('.container').each(function () {
    console.log($('.black').length);
    if ($('.black').length > 4) {
        $('.original').fadeOut(600);
    }
});

Answer 1

您需要将支票移至点击处理程序内，否则它只会在开始时运行一次。

$(document).ready(function () {
    $('.container').on('click', '.original', function () {
        $(this).clone(true).addClass('black').insertAfter($(this)).removeClass('original');
        var itemsNumber = $('.black').length;
        $('.container').each(function () {
            if (itemsNumber > 4) {
                $('.original').fadeOut(600);
            }
        });
    });
});

jsfiddle.net/2U7W6/4

Answer 2

淡出的代码只被调用一次（在就绪函数中）。您需要在单击函数

中移动代码

$(document).ready(function () {
  $('.container').on('click', '.original', function () {
    $(this).clone(true).addClass('black').insertAfter($(this)).removeClass('original');

    var itemsNumber = $('.black').length;
    $('.container').each(function () {
        if (itemsNumber > 4) {
            $('.original').fadeOut(600);
        }
    });
 });
});

Answer 3

问题是当你检查并设置盒子数量的值时，它首次被强化，$(document).ready(function () { $('.container').on('click', '.original', function () { $(this).clone(true).addClass('black').insertAfter($(this)).removeClass('original'); }); $(".original").click(function(){ var itemsNumber = $('.black').length; $('.container').each(function () { if (itemsNumber > 4) { $('.original').fadeOut(600); } }); }); });

克隆（）之后长度不会工作

3 个答案: