如果網站上存在多個滑塊，則顯示Jquery UI滑塊的值

我正在構建一個包含不同輸入類型=「範圍」滑塊的表單，並設法讓它們顯示一個值。如果網站上存在多個滑塊，則顯示Jquery UI滑塊的值

但是，當我包含多個滑塊時，這些值實際上並不會單獨更改。我希望他們爲自己改變每一個。

最後我想有至少10個範圍滑塊。有什麼建議麼？這裏是小提琴：

謝謝你提前爲你能提供任何提示。

這裏是我的代碼顯示的值： var initialValue = 50;

var sliderTooltip = function(event, ui) { 
     var curValue = ui.value || initialValue; 
     var tooltip = '<div class="tooltip237"><div class="tooltip237-inner">' + curValue + '</div><div class="tooltip237-arrow"></div></div>'; 

     $('.ui-slider-handle').html(tooltip); 

    } 

    $("#slidercomeagain").slider({ 
     value: initialValue, 
     min: 0, 
     max: 100, 
     step: 1, 
     create: sliderTooltip, 
     slide: sliderTooltip 
    }); 


    $("#sliderrecommendation").slider({ 
     value: initialValue, 
     min: 0, 
     max: 100, 
     step: 1, 
     create: sliderTooltip, 
     slide: sliderTooltip 
    });

來源

2013-10-30 LoveAndHappiness

問題是你的工具提示正在改變每一張幻燈片，因爲你正在改變所有div「.ui-slider-handle」。

var sliderTooltip = function(event, ui) { 
     var curValue = ui.value || initialValue; 
     //get the id of the slider 
     var target = $(event.target).attr("id"); 

     var tooltip = '<div class="tooltip237"><div class="tooltip237-inner">' 
      + curValue + '</div><div class="tooltip237-arrow"></div></div>'; 

     // update the tooltip of the target slider 
     $("#"+target + ' .ui-slider-handle').html(tooltip); 

    }

上述代碼僅更新目標滑塊的工具提示。

請參閱本演示中的jsfiddle http://jsfiddle.net/WzqjC/3/

來源

2013-10-31 00:07:53

在哪裏鏈接的演示與我鏈接的演示不同？謝謝。 – LoveAndHappiness

@ user2807996對不起，錯誤的鏈接，你現在可以試試嗎？ –

非常感謝您的努力。我目前正在研究這一點。只是想讓你知道，更新你的jsifddle，不能正常工作。請不要誤會，因爲我感謝你的幫助。我只是想能夠調整每個滑塊分開。但我正在研究這一點。 – LoveAndHappiness

這裏是您的解決方案 - http://jsfiddle.net/MfegM/1155/ 您需要的功能與滑塊

$(this).children('.ui-slider-handle').html(tooltip);

連接的提示由於您的功能已經發生（事件，UI），所有您需要添加$（this）將結果與觸發事件的滑塊相關聯

來源

2013-10-31 01:13:30

非常感謝。你真棒。 – LoveAndHappiness

如果網站上存在多個滑塊，則顯示Jquery UI滑塊的值

回答

相關問題