多個jQuery UI滑塊更新錯誤的值

我使用Wordpress Meta Box插件（https://github.com/rilwis/meta-box）將六個jQuery UI滑塊放在帖子頁面上。多個jQuery UI滑塊更新錯誤的值

問題是，在處理滑塊我無法找到的jQuery中必定存在錯誤：每當我放入多個滑塊時，它都會更新頁面中最後一個滑塊的值而不是正確的滑塊。只有在頁面中有1個滑塊才能正常工作，或者如果我重複六次代碼（每個班級一次），顯然我不想這樣做。

實施例：

我移動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

這四天我對此感到頭疼（我不是jQuery專家），所以任何幫助都會很感激。

Thanks guys guys

來源

2013-02-01 djwd

我猜的誤差必須在這裏的某個地方在年底，或在使用的變量： '$（更新）的.text（ui.value + '' +格式）;' 請幫助:( – djwd

想到解決這個問題，試圖解決類似的問題。

對於任何人的參考：問題是輸入和更新值正在重置每次創建滑塊（每個（）循環的迭代）。

因此，當任何UI滑塊對象檢測它要求使用爲「輸入」和「更新」

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

的解決方案是使用一個jquery此對象中設置的最後一個值以下邏輯滑動事件$（this）作爲選擇器的根。

E.G.

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

可能有更高效的寫作方式，但它可以解決問題的根源。

來源

2013-10-22 07:02:08 Brad

多個jQuery UI滑塊更新錯誤的值

回答

相關問題