Question

我试图用数组的所有值删除所有选定的类，但我不能这样做（我只删除数组中的第一个），解决这个问题的方法是什么？下面你可以找到我想要做的事情。

HTML：

 <input type="checkbox" value="red">red</input><br>
    <input type="checkbox" value="green">green</input><br>
    <input type="checkbox" value="blue">blue</input><br><br>
    <input type="submit" value="Delete selected colors"></input><br><br/>
        <div class="thumbnailas">
            <img class="red">
            <img class="green">
            <img class="blue">
        </div>

Jquery的：

  $(document).ready(function() {
            $('input[type="submit"]').click(function() {
            var allVals = [];
            var result = $('input[type="checkbox"]:checked');
                result.each(function() {
                    allVals.push($(this).val())
                });
                $('.'+ allVals).hide();
            });
    });

https://jsfiddle.net/h6bofqae/3/

Answer 1

您可以在不使用数组的情况下执行此操作。 JavaScript看起来像这样：

$(document).ready(function() {
    $('input[type="submit"]').click(function() {
        var result = $('input[type="checkbox"]:checked');
        result.each(function() {
            $('.'+ $(this).val()).hide();
        });
    });
});

看看这个小提琴https://jsfiddle.net/h6bofqae/5/

如果需要使用数组，那么可以像这样迭代allVals数组：

for (color of allVals) {
    $('.'+color).hide();
}

Answer 2

直接删除它们，不需要创建数组，jquery代码如下所示：

$(document).ready(function() {
    $('input[type="submit"]').click(function() {    
    var result = $('input[type="checkbox"]:checked');
        result.each(function() {
            $('.' + $(this).val()).hide();
        });
    });
});

Answer 3

只需将你的jquery代码替换为：

$(document).ready(function() {
        $('input[type="submit"]').click(function() {
        var result = $('input[type="checkbox"]:checked');
            result.each(function() {
                $('.'+ $(this).val()).hide();
            });

        });
});

Answer 4

有几种方法可以做到这一点。

或者：

a）循环遍历allVals数组，根据其中的类隐藏每个元素。

而不是$('.'+ allVals).hide();，您需要：

allVals.forEach(function(class) {
    $('.' + class).hide();
});

b）忘记数组，只需遍历每个选中的复选框，然后根据值找到元素。

var result = $('input[type="checkbox"]:checked');
    result.each(function() {
        $('.'+ $(this).val()).hide();
    });
});

c）如果你真的想使用数组并在单个语句中隐藏元素（不再循环），你可以使用Array.join。

$('.' + allVals.join(',.')).hide();

https://jsfiddle.net/h6bofqae/6/

jQuery - 获取数组值并逐个使用它

4 个答案: