Question

我使用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与列表中的一个变体匹配的元素。即隐藏任何标识为green，blue或red的元素。

Answer 1

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

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

Answer 2

您可以将目标字符串转换为选择器字符串。首先，使用.split()将字符串转换为数组，并使用.map()添加#以开始每个数组项，并使用{{3}将{final}数组转换为,分隔符的字符串}。现在你可以在jquery选择器中使用result。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Jquery - 使用列表中存在的ID隐藏所有元素

2 个答案: