Question

基本上我正在将容器推入一个数组，一旦推出容器，我不想再次推送同一个容器。

这是我的JSfiddle：http://jsfiddle.net/9Dmcg/3/

使用Javascript：

$(document).ready(function(){

var favorites = [];
var counter = 0;

    $('.containers').on('click', function(){

        favorites.push($(this).clone())

        $('.favorite').append(favorites);
    });


});

我需要找到解决这个问题的方法。

Answer 1

除非点击事件有更多内容，否则您可以使用.one()方法代替.on来获取此功能。

$(document).ready(function(){

    var favorites = [];
    var counter = 0;

    $('.containers').one('click', function(){

        favorites.push($(this).clone())

        $('.favorite').append(favorites);
    });    

});

http://jsfiddle.net/9Dmcg/4/

即使有更多内容，您仍然可以使用.one()：

$(document).ready(function(){

    var favorites = [];
    var counter = 0;

    $('.containers').one('click', function(){

        favorites.push($(this).clone())

        $('.favorite').append(favorites);

        $(this).on("click",function(){
             alert("Favorite Added!");
        }).triggerHandler("click");

    });    

});

http://jsfiddle.net/9Dmcg/5/

Answer 2

尝试检查我会说的元素ID。像这样：

$(document).ready(function(){

var favorites = [];
var counter = 0;

    $('.containers').bind('click', function(){
        var isAdded = false;
        for (var f = 0; f < favorites.length; f++) {
            console.log(favorites[f].id + "|" + this.id);
             if (favorites[f].id === this.id)
                 isAdded = true;
        }

        if (!isAdded)
            favorites.push($(this).clone()[0])


         console.log(favorites);
        $('.favorite').append(favorites);
    });


});

这是一个有效的例子 - ＆gt; http://jsfiddle.net/9Dmcg/7/

MZ

Answer 3

这可以使用JS代理（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy）

来完成

以下是创建不接受重复条目的数组的代码

var arr = new Proxy([], {
  get: function(target, key) {
    return target[key];
  },
  set: function(target, key, value){
    if(target.indexOf(value)>=0) return false;
    target[key] = value;
    return true
  }
});
arr.push(100);
arr.push(100); // this will throw error

在上面的代码中，我们正在修改数组的默认行为，因为在对数组进行的任何修改时都会调用set方法。

Answer 4

您可以检查该元素是否已存在：

$(document).ready(function(){

    var favorites = [];

    $('.containers').on('click', function(){
        var found = false;
        for(var i = 0; i < favorites.length; i++)
        {
            if (favorites[i] == $(this)) found = true;
        }
        if (!found) favorites.push($(this).clone())

        $('.favorite').append(favorites);
    });


});

Answer 5

将类添加到已推送的项目，然后执行基本检查：而不是：

favorites.push($(this).clone())

你可以这样做：

if( !$(this).hasClass("pushed") ) {
    favorites.push( $(this).addClass("pushed").clone() );
}

Answer 6

只需推送元素而不是克隆它：

favorites.push($(this))

额外的好处是它可以为用户提供已添加项目的线索。

现场演示：http://jsfiddle.net/9Dmcg/6/

Answer 7

好像在寻找Array.indexOf。它返回数组上的值的索引。如果找不到则返回-1。

这是一种新的数组方法，因此您需要使用polyfill才能在旧浏览器上运行。

$(document).ready(function(){

    var favorites = [];
    var counter = 0;

    $('.containers').on('click', function(){
        var clone = $(this).clone(); // caching element

        if (favorites.indexOf(clone) !== -1) {
            favorites.push(clone);
        }

        $('.favorite').append(favorites);
    });
});

不允许将重复项目推送到数组中

7 个答案: