슬라이더 값을 기준으로 JQuery 슬라이더 변경 img

Question

슬라이더 값을 가져 와서 값을 인식하고 이미지를 변경하려고합니다. 그것은 jquery의 기본 기능에 대한 엄지 손가락 개념입니다. 따라서 사용자가 왼쪽으로 슬라이드하면 (엄지 손가락을 아래로) img css (불투명도)를 변경하여 선택한 것을 표시합니다.

필자는 이것이 충분하다고 생각했지만 실제로는 슬라이더를 완전히 제거합니다.

if ui.value >= 51{ 
    $('img.up').css('opacity','.8'); 
    alert('cool'); 
} 
if ui.value <= 49{ 
    $('img.down').css('opacity','.8'); 
    alert('too bad'); 
} 

은 내가 fiddle here했다. 슬라이더 값을 적용하려면 어떻게해야합니까?

저는 슬라이더가 배수로 생성되지 않는 이유에 대해 다른 질문을하고 싶습니다. 하지만 충고가 있으면 그걸 가져갈거야.

미리 도움을 주셔서 감사합니다.

Answer 1

if 문에 괄호를 추가하지 않았습니다.

$('img.up, img.down').css('opacity','.4'); 
if (ui.value >= 51) { 
    $('img.up').css('opacity','.8'); 
} 
if (ui.value <= 49) { 
    $('img.down').css('opacity','.8'); 
} 

DEMO

Answer 2

나는 당신의 바이올린을 업데이트했습니다. 내가 틀리지 않다면 이것은 당신이 최종 결과로 원했던 것입니다. 이 코드를 시도하고 바이올린을 확인하십시오.

$("#slider").slider({ 
value:50, 
min: 0, 
max: 100, 
step: 50, 
slide: function(event, ui) { 
if (ui.value >= 51){ 
    $('img.up').css('opacity','.8'); 
    $('img.down').css('opacity','.4'); 
} 
if (ui.value <= 49){ 
    $('img.down').css('opacity','.8'); 
    $('img.up').css('opacity','.4'); 
} 
} 
}); 

Answer 3

명세서가 누락 된 경우 괄호

$("#slider").slider({ 
     value:50, 
     min: 0, 
     max: 100, 
     step: 50, 
     slide: function(event, ui) { 
     if (ui.value >= 51){ 
      $('img.up').css('opacity','.8'); 
      alert('cool'); 
     } 
     if (ui.value <= 49){ 
      $('img.down').css('opacity','.8'); 
      alert('too bad'); 
     } 
     } 
    });