Question

你能帮我解决一个小问题吗？

我有一些数字。点击后，选中的图复制到另一个div（篮子）。在篮子里应该出现新的按钮。但在我的解决方案中，每次点击后这个按钮再次出现。我怎么解决这个问题？谢谢，抱歉我的英文

此代码

<div class="products__list__items">
    <div class="products__list__item row">
        <figure class="product first" data-class="first">
            <img src="https://www.tineye.com/images/robot-search-header.png" alt="product1" class="product__img">
            <figcaption class="product__title">One</figcaption>
        </figure>
    </div>
    <div class="products__list__item row">
        <figure class="product first" data-class="first">
            <img src="https://www.tineye.com/images/robot-search-header.png" alt="product1" class="product__img">
            <figcaption class="product__title">Two</figcaption>
        </figure>
    </div>
    <div class="products__list__item row">
        <figure class="product first" data-class="first">
            <img src="https://www.tineye.com/images/robot-search-header.png" alt="product1" class="product__img">
            <figcaption class="product__title">Three</figcaption>
        </figure>
    </div>          
</div>
<div class="basket">

</div>

Jquery代码

$(document).ready(function() {
    var addToBasket = function() {
        var that = $(this);
        if(!that.hasClass('added')) {
            that.clone().appendTo($('.basket'));
            that.addClass('added');
        };  
        $('.basket .product').append('<button>x</button>');
    };
    $(document).on("click",".products__list__item .product",addToBasket);
});

这里小提琴 https://jsfiddle.net/fhxx9hm3/

Answer 1

每个产品只应添加一次按钮。

var addToBasket = function() {
    var that = $(this);
    if(!that.hasClass('added')) {
        //Append the button here
        that.clone().add('<button>x</button>').appendTo($('.basket'));
        //Or
        //that.clone().append('<button>x</button>').appendTo($('.basket'));
        that.addClass('added');
    };  
    //Following statement is not required
    //$('.basket .product').append('<button>x</button>');       
};

DEMO

添加按钮到新元素

1 个答案: