5

基本上我将容器推入一个数组，一旦一个被推入，我不想让同一个被再次推入。

这是我的 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);
    });


});

我需要找到一种方法来解决这个问题。

4

7 回答 7

4

除非该单击事件有更多内容，否则您可以使用该.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/

于 2013-03-12T22:03:37.003 回答
1

尝试检查我会说的元素 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);
    });


});

这是工作示例-> http://jsfiddle.net/9Dmcg/7/

mz

于 2013-03-12T22:13:31.643 回答
1

这可以使用 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 方法。

于 2017-11-20T10:00:11.847 回答
0

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

$(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);
    });


});
于 2013-03-12T22:07:34.730 回答
0

为已推送的项目添加一个类，然后进行基本检查：而不是：

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

你可以做：

if( !$(this).hasClass("pushed") ) {
    favorites.push( $(this).addClass("pushed").clone() );
}
于 2013-03-12T22:13:15.320 回答
0

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

favorites.push($(this))

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

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

于 2013-03-12T22:14:42.160 回答
0

好像您在寻找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);
    });
});
于 2013-03-12T22:14:56.453 回答