잘못된 값을 업데이트하는 여러 jQuery UI 슬라이더

Question

Wordpress 메타 박스 플러그인 (https://github.com/rilwis/meta-box)을 사용하여 게시물 페이지에 6 개의 jQuery UI 슬라이더를 배치하고 있습니다.

문제는 내가 찾을 수없는 슬라이더를 처리하는 jQuery에 오류가 있어야한다는 것입니다. 여러 슬라이더를 넣을 때마다 올바른 슬라이더 대신 페이지의 마지막 슬라이더 값을 업데이트합니다. 페이지의 슬라이더 1 개로만 잘 작동합니다. 또는 코드를 6 번 반복하면 (각 클래스마다 한 번씩) 분명히하고 싶지 않습니다.

예 :

내가 이동 pm_slider_c1> 업데이트 pm_rating_c6 라벨 기간

여기에 JS 코드입니다 :

<div class="rwmb-field rwmb-slider-wrapper"> 
    <div class="rwmb-label"> 
     <label for="pm_rating_c1">Rating: 
      <span id="pm_rating_c1-label">0</span><!-- GENERATED FROM JS --> 
     </label> 
    </div> 

    <div class="rwmb-input"> 
     <div class="clearfix"> 
      <div class="rwmb-slider" id="pm_rating_c1"></div> 
      <input type="hidden" name="pm_rating_c1" value="0"> 
     </div> 
    </div> 
</div> 

: 하나의 슬라이더의

jQuery(document).ready(function($) 
{ 
    var 
     id = null 
     , el = null 
     , input = null 
     , label = null 
     , format = null 
     , value = null 
     , update = null 
     ; 
    $('.rwmb-slider').each(function(i, val) 
    { 
     id = $(val).attr('id'); 
     el = $('#' + id); 
     input = $('[name=' + id + ']'); 
     label = $('[for=' + id + ']'); 
     format = $(el).attr('rel'); 

     $(label).append(': <span id="' + id + '-label"></span>'); 
     update = $('#' + id + '-label'); 

     if (
      !$(input).val() 
       || 'undefined' === $(input).val() 
       || null === typeof $(input).val() 
      ) 
     { 
      $(input).val($(el).slider("values", 0)); 
      $(update).text("0"); 
     } 
     else 
     { 
      value = $(input).val(); 
      $(update).text(value); 
     } 
     if (0 < format.length) 
      $(update).append(' ' + format); 

     el.slider(
      { 
       value: value, 
       slide: function(event, ui) 
       { 
        $(input).val(ui.value); 
        $(update).text(ui.value + ' ' + format); 
       } 
      }); 
    }); 
}); 

HTML은

4 일 동안이 문제에 골머리를 앓고 있습니다. jQuery 전문가가 아니므로 도움이 될 것입니다.

감사합니다.

Answer 1

비슷한 문제를 해결하기 위해이 질문에 답을 찾으 셨습니다.

누구나 참고할 수 있습니다. 문제는 슬라이더를 만들 때마다 (each 루프 반복마다) 입력 값과 업데이트 값이 재설정된다는 것입니다.

어떤 UI 슬라이더 객체는 당신이 '입력'과 솔루션은 JQuery와이 객체를 사용하는 것입니다

$(input).val(ui.value); 
$(update).text(ui.value + ' ' + format); 

'갱신'에 설정된 마지막 값을 사용하여 다음과 같은 논리를 호출하는 슬라이드 이벤트를 감지 따라서 $ (this)을 선택기의 루트로 사용합니다.

E.G.

el.slider(
      { 
       value: value, 
       slide: function(event, ui) 
       { 
        $(this).find("input").val(ui.value); 
        $(this).closest("label").text(ui.value + ' ' + format); 
       } 
      }); 

더 효율적인 방법을 쓰는 것이 가능하지만 문제의 근원을 해결할 수 있습니다.