Question

我有一个图像网格，每个图像都有一个data-image属性和值。

当用户选择图像时，其data-image属性的值将添加到数组中。

我希望代码能够正常工作，以便当用户点击某个项目时，如果该项目已经在数组中（即，如果用户之前已经点击过它），那么它就会被删除。

类似于选择/取消选择选项。

HTML

<div class="fifth" data-image="1">
    <div class="full clearfix relative">
        <img src="image.png" />

        <div class="overlay"></div>

    </div>
    <div class="options">
        <h4 class="txt-white left">#0001</h4>
        <h4 class="right txt-gold select-image" data-image="1">Select</h4>
    </div>
</div>

的jQuery

var images = [];
var price = $('.order').data('price');

    // select
    $('.select-image').on('click', function() {

        $(this).parent().parent().toggleClass('selected');
        $(this).toggleClass('selected');

        if( $(this).hasClass('selected') ) {
            $(this).html('&#10005;');
        } else {
            $(this).html('Select');
        }

        images = $.grep(images, function(value) {
            return value != $(this).data('image');
        });

        console.log(images);

        images.push($(this).data('image'));

        var items = images.length;

        $('.total-price').html(items*price);

    });

但是，我似乎无法弄清$.grep的工作原理。有什么想法吗？

[UPDATE]

Here's a JS Fiddle of what I have so far, you can see the issue here.

Answer 1

此处无需使用$.grep，原生indexOf和splice即可。

var images = [], image, index;
$('.select-image').on('click', function() {
    // ....
    image = $(this).data('image');
    // Lookup image in array
    index = images.indexOf(image);
    if(~index){ // ~ makes index evaluate as boolean (not really though)
         // If found, remove that entry from the array
         images.splice(index, 1);
    }else{
         // Otherwise, add it to the array
         images.push(image);
    }
    // ....
});

Answer 2

Grep循环遍历数组的方式与$ .each完全相同，只有一个例外。如果从回调中返回true，则保留该元素。否则，它将从数组中删除。

您的代码应如下所示：

items = $.grep(items, function (el, i) {
if (i === 5) { // or whatever
    return false;
}

// do your normal code on el

return true; // keep the element in the array
});

Answer 3

Grep接受一个数组并为该数组中的每个元素执行一个函数。此函数返回true或false，具体取决于给定的条件。然后，Grep将返回函数在数组中返回true的每个元素。

$.grep( images, function($arrayElement, index) {
  return $arrayElement.attr("data-anything") == "yes i like fish";
});

我不太清楚为什么你需要在图像网格上使用grep; 如何给出一个“.selected”类并使用它来过滤掉已经选中的元素？

修改你基本上要求的是非案例。您想要选择没有特定值的元素。

var a_preselected_value = 9; var images_with_one_id_deselected = $.grep( images, function($arrayElement, index) { return $arrayElement.data("image") != a_preselected_value; });

检查数组中的值，如果为true则删除

3 个答案: