Jquery - 隐藏列表中存在的所有具有id的元素答案

【问题标题】：Jquery - hide all elements with ids that exist in a listJquery - 隐藏列表中存在的所有具有id的元素
【发布时间】：2016-10-15 19:34:17
【问题描述】：

我正在使用 jquery 找出点击的元素 data-variants 是什么，使用以下代码：

<button data-variants="green blue red">Red<button>

$('#topSelector').on('click', 'button', function() {
    var variants = $(this).data('variants');
});

单击按钮会将变量设置为green blue red。我想过滤并隐藏所有具有与列表中的变体之一匹配的 id 的元素。即隐藏 ID 为 green、blue 或 red 的任何元素。

【问题讨论】：

标签： javascript jquery html attributes

【解决方案1】：

分割颜色，然后循环它们并隐藏元素

$('#topSelector').on('click', 'button', function() {
    var variants = $(this).data('variants');
    variants.split(" ").forEach(function(el) {
        $('#' + el).hide();
    });
});

【讨论】：

它可以工作，但我得到一个错误：jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #bottomSelector #
一种更好的方法是将所有 id 连接到一个选择器，你可以做任何你想做的事情。变量 $selected = $(#id1, #id2, #id3); - 现在如果你想 .show() 它你不必再次枚举它们。

【解决方案2】：

您可以将目标字符串转换为选择器字符串。首先，使用.split() 将字符串转换为数组，并使用.map() 将# 添加到数组的每个项的开头，并使用.join() 使用, 分隔符将最终数组转换为字符串。现在你可以在 jquery 选择器中使用结果了。

$('#topSelector').on('click', 'button', function() {
    var selector = $(this).data('variants').split(" ").map(function(val){
        return "#" + val;
    }).join(",");   
    $(selector).hide();
});

$('#topSelector').on('click', 'button', function() {
    var selector = $(this).data('variants').split(" ").map(function(val){
        return "#" + val;
    }).join(",");   
    $(selector).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topSelector">
  <button data-variants="green blue red">Hide</button>
</div>
<div id="green">Green</div>
<div id="blue">Blue</div>
<div id="red">Red</div>

【讨论】：