0

data-rel 値を持つ複数のオブジェクトがあり、そのうちのいくつかについてのみ、次のようにコンテンツの色を赤に変更できるようにしたいと考えています。

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>

脚本

 $("[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']。

4

2 に答える 2

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');
});
于 2014-11-05T17:05:59.127 に答える
1

奇数番号のみに関心がある場合は、次のように実行できます。

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


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

于 2014-11-05T17:08:45.477 に答える