jQuery : jQueryUI 슬라이더에서 셀렉터가 작동하지 않습니다.

Question

다음 코드가 있습니다. 내가 뭘하려고 오전

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

하지만 올바르게 작동하지 않습니다. http://jsfiddle.net/isimpledesign/CmJXm/3/

Answer 1

가 왜 그냥 하나의 값 (구분 공간이다)에 채널 문자열 VAR을 분할하고 각 값을 테스트 : 여기 내 코드가 포함 된 jsfiddle이야?

Answer 2

당신이 묻는 것을 이해한다면, '속성 단어 선택자'로 할 수 있습니다.

과 같이 : 즉

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

, 귀하의 예제에서 인덱스 0, 2, 3을 선택하는 :

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

당신이 .3에의 나머지 부분을 페이드하려면, I 일치하는 채널을 표시 한 다음 표시가없는 모든 사람을 선택하십시오. 그래서 같이 :

는 데이터 채널 슬라이더의 현재 값을 포함 때/숨기기를 보여, 정확한 문제에 대한,

그래서 업데이트, 자사의 슬라이드 이벤트에이 바인딩 :

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

} 

Answer 3

split() 및 indexOf() 문제를 해결할 수 있습니다.

if (channels == filter) { 

사람 : : 원래 코드의 다음 줄을 변경

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

데모 : 요소의 contains`이 * 내용에 운영 *,하지 : 당신은`실현 않는 http://jsfiddle.net/ThinkingStiff/QSYz8/