jQuery: содержит селектор, не работает с ползунком jQueryUI - PullRequest
Новая
       37

jQuery: содержит селектор, не работает с ползунком jQueryUI

1 голос
/ 19 декабря 2011

У меня есть следующий код. 

<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"));

Я пытаюсь получить fadeto продукты, которые содержат определенные значения в теге channels данных. Работает нормально, когда каналы данных имеют единичные значения. Но теперь клиент хочет, чтобы он имел несколько значений, как показано ниже.

Так что я не могу использовать оператор ==, мне нужно сделать какой-то оператор содержимого, что-то вроде ниже, но я попал в кирпичную стену. 

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

Но это не работает должным образом. Вот jsfiddle, который содержит мой код: http://jsfiddle.net/isimpledesign/CmJXm/3/

Ответы [ 3 ]

1 голос
/ 19 декабря 2011

Если я понимаю, что вы спрашиваете, вы можете сделать это с помощью «селектора атрибутов».

Примерно так: 

$("li.prod[data-channels~='"+channel+"'").each(function (index) {
    $(this).fadeTo("fast", 1);
});

Другими словами, для выбора индекса 0, 2, 3 из вашего примера: 

$("li.prod[data-channels~='8'")

Если вы хотите затемнить остальныеиз них до .3, я бы отмечал соответствующие каналы, а затем выбирал всех, у кого нет отметки.Вот так:

Обновлено

Итак, для вашей конкретной задачи, показать / скрыть, когда его канал данных содержит текущее значение ползунка, привязать его к событию слайда: 

function (event, ui) {
    ...
    // reset marker        
    $("li.prod").attr("data-active", "false");

    // show channels
    $("li.prod[data-channels~='"+ui.value+"'").each(function (index) {
        $(this).fadeTo("fast", 1);
        $(this).attr("data-active", "true"); // mark them
    });

    // hide rest
    $("li.prod[data-active!='true'").each(function (index) {
        $(this).fadeTo("fast", .3);
    });
}

Обновлено (x2)

Благодаря обратной связи @YiJiang нам не нужно делать все эти маркеры.Просто используйте селектор siblings, чтобы объединить каналы, которые вы хотите скрыть.Вот так: 

function (event, ui) {
    ...

    // show target channels
    $("li.prod[data-channels~='"+ui.value+"'").fadeTo("fast", 1)
        .siblings().fadeTo("fast", .3);

}
1 голос
/ 19 декабря 2011

Почему бы просто не разбить строковую переменную channel на отдельные значения (разделитель space ) и проверить каждое значение?

0 голосов
/ 20 декабря 2011

split() и indexOf() могут решить вашу проблему.Измените следующую строку исходного кода: 

if (channels == filter) {

На: 

if (channels.toString().split( ' ' ).indexOf( filter.toString() ) > -1 ) {

Демо: http://jsfiddle.net/ThinkingStiff/QSYz8/

...