Question

I have the following code.

<ul>
    <li class="prod" data-channels="3 4 6 8">product 1</li>
    <li class="prod" data-channels="1">product 2</li>
    <li class="prod" data-channels="2 8">product 3</li>
    <li class="prod" data-channels="3 8">product 4</li>
    <li class="prod" data-channels="3">product 5</li>
    <li class="prod" data-channels="6">product 6</li>
</ul>

$("#slider").slider({
    value: 0,
    min: 0,
    max: 24,  
    step: 1,
    slide: function (event, ui) {
        $("#amount").val(ui.value);
        var filter = ui.value;

        if (filter) {
            $('li.prod').each(function (index) {
                var channels = $(this).data('channels');
                if (channels == filter) {
                    $(this).fadeTo("fast", 1);
                } 
                else {
                    $(this).fadeTo("fast", 0.3);
                }
            });
        }
    }
});
$("#amount").val($("#slider").slider("value"));

What I am trying to do is get it to fadeto the products that contain certain values in the data channels tag. It works fine when the data-channels had single values. But now the client wants it to have multiple values like below.

So I can’t use the == operator I need to do some sort of contains operator, something like the below but I have hit a brick wall.

var channels = $(this).data('channels');
if ($("li.prod:contains('"+channels+"')")) {
    $(this).fadeTo("fast", 1);
} 
else {
    $(this).fadeTo("fast", 0.3);
}

But it’s not working properly. Here’s a jsfiddle that contains my code: http://jsfiddle.net/isimpledesign/CmJXm/3/

Answer 1

Why not just split the channels string var into single values (separator is space) and test each value ?