jquery select 문제

Question

아래 코드는 슬라이더 클래스를 슬라이더 컨트롤로 변환하는 함수입니다. 「슬라이드」이벤트가 발생했을 때에 실행되는 기능을 가지고 있습니다.

$(function(){ 
       $(".slider").slider({ 
        value: 0, 
        min: 0, 
        max: 5, 
        step: 1, 
        slide: function(event, ui) { 
         $(".slideinput > input.slidevalue").val(ui.value); 
        } 
       }); 
      }); 

한 페이지에 여러 슬라이더가있는 경우이 코드가 작동하지 않습니다. (그것은 모두를 변화시키고 있습니다) 어떻게 해결할 수 있습니까? 나는 유일한 id를 갖는 요소를 선택하기 위해 두 번째 요소 select statetment를 설정하는 방법을 모른다.

요소의 위치를 ​​ilustrate 일부를 HTML (ID가 동적으로 생성된다).

<div class="item"> 
      <p class="head"> 
       A kako biste općenito ocijenili sljedeće aspekte ljetne turističke ponude u Hrvatskoj: Kvaliteta smještaja?</p> 

      <div class="slideinput" style="width: 220px; height: 20px; padding-top: 10px; padding-left: 8px;"> 
       <div style="width: 200px;" class="slider"> 
       </div> 
       <input class="slidevalue" id="q34" name="q34" type="hidden" value="0" /> 
      </div> 

     </div> 

     <div class="item"> 
      <p class="head"> 
       Broj plaža?</p> 

      <div class="slideinput" style="width: 220px; height: 20px; padding-top: 10px; padding-left: 8px;"> 
       <div style="width: 200px;" class="slider"> 
       </div> 
       <input class="slidevalue" id="q35" name="q35" type="hidden" value="0" /> 
      </div> 

     </div> 

     <div class="item"> 
      <p class="head"> 
       Urednost plaža?</p> 

      <div class="slideinput" style="width: 220px; height: 20px; padding-top: 10px; padding-left: 8px;"> 
       <div style="width: 200px;" class="slider"> 
       </div> 
       <input class="slidevalue" id="q36" name="q36" type="hidden" value="0" /> 
      </div> 

     </div> 

     <div class="item"> 
      <p class="head"> 
       Kvaliteta restorana i kafića?</p> 

      <div class="slideinput" style="width: 220px; height: 20px; padding-top: 10px; padding-left: 8px;"> 
       <div style="width: 200px;" class="slider"> 
       </div> 
       <input class="slidevalue" id="q37" name="q37" type="hidden" value="0" /> 
      </div> 

     </div> 

어떤 해결책이 있습니까?

Answer 1

본인은 "슬라이드"이벤트에 대한 확실하지 않다 - 그러나 대부분의 jQuery 이벤트는 대상 요소로 this 설정을해야합니다.

당신이 console.log(this); (가정 방화 광) 당신이 무엇을 볼 수있는 일을 시도 했습니까?

당신은이 작업을 수행 할 수 있습니다이 :

코멘트와 함께 업데이트 :

당신의 입력 요소는 "슬라이더"부모가 아닌 슬라이더의 아이 인 것 같다, 코드 블록을 변경 당신을 반영하기 위해.

slide: function(event, ui) { 
    $(this).parent().find("input.slidevalue").val(ui.value); 
}