0

I have multiple objects with data-rel values and for only some of them I would like to be able to, let's say, change to color of the content to red like so:

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'
        });
    });

This works but it can get pretty boring to write for each value [data-rel='3'] so I was wondering, is there a way to do this something like: [data-rel='1, 3'] instead of [data-rel='1'], [data-rel='3']?

Alin
  • 1,218
  • 5
  • 21
  • 47

2 Answers2

1

Yes, you do have a cool way of doing it

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');
});
Amit Joki
  • 58,320
  • 7
  • 77
  • 95
  • Well, with some work this would do but the thing is that I wanted less code, simplified, I will have more pairs of less or equal to 4 numbers, nu more, so this solution would only make my script longer – Alin Nov 05 '14 at 17:11
  • @Alin well, all you've to do is add numbers to the array – Amit Joki Nov 05 '14 at 17:13
  • 1
    @Alin - I doubt you'd get much shorter than this. – j08691 Nov 05 '14 at 17:14
  • 1
    Well yes, I agree with you that I would only have to add numbers to the array, but I have 63 such objects that will be in pairs of 4, If one of those 4 is hovered, all of them react. With 63 objects I would have to write the code above 16 times, so this would actually make it longer than the original solution ^^ But Thanks a lot. +1 for your time and the idea :D – Alin Nov 05 '14 at 17:17
1

If you're interested in the odd numbered ones only, you could do it as follows:

$('[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>
PeterKA
  • 24,158
  • 5
  • 26
  • 48
  • Well, not quite, I have more than 4 and it will be mixed numbers. Sorry and thanks. – Alin Nov 05 '14 at 17:09
  • Is there a sequence to it? Or are you able to pre-determine which these are? – PeterKA Nov 05 '14 at 17:11
  • I am able to pre-determine them. – Alin Nov 05 '14 at 17:12
  • Unfortunately without some kind of a formular or list, I can only help so much. – PeterKA Nov 05 '14 at 17:13
  • Well, it's fine, I just wanted to see if there's an easier way of doing it, I didn't want to write so much and make my code longer than it has to be. +1 For your example. Thanks. – Alin Nov 05 '14 at 17:14
  • No problem. I believe @AmitJoki has the right idea; listing all the number you want affected and using that in the event handler. – PeterKA Nov 05 '14 at 17:20