Question

我有多个具有数据相关值的对象，但我只希望其中一些对象能够将内容的颜色更改为红色，如下所示：

HTML

<p data-rel="1">1</p>
<p data-rel="2">2</p>
<p data-rel="3">3</p>
<p data-rel="4">4</p>

SCRIPT

 $("[data-rel='1'], [data-rel='3']").hover(function (){
        $( this ).css({
            'color': 'red'
        });
    });

这样可行，但为每个值[data-rel='3']写一下会很无聊，所以我想知道，有没有办法做到这一点：[data-rel='1, 3']而不是[data-rel='1'], [data-rel='3']？< / p>

Answer 1

是的，你确实有一种很酷的方式

var arr = [1, 3]; // add the numbers you want
$('[data-rel]').filter(function(x) {
    return arr.indexOf(+$(this).data("rel")) > -1; // check if it is present
}).hover(function() {
    $(this).css('color', 'red');
});

Answer 2

如果您只对奇数编号感兴趣，可以按照以下步骤操作：

$('[data-rel]').filter(function(i,p) { 
    return +$(p).data('rel') % 2 === 1;
})
.hover(function() {
    $( this ).css({
        'color': 'red'
    });
});

＆＃13;

$('[data-rel]').filter(function(i,p) { 
    return +$(p).data('rel') % 2 === 1;
})
.hover(function() {
    $( this ).css({
        'color': 'red'
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p data-rel="1">1</p>
<p data-rel="2">2</p>
<p data-rel="3">3</p>
<p data-rel="4">4</p>

＆＃13;

多个数据相关值

2 个答案: