[英]jQuery range slider value box for multiple divs
我是js和jQuery的新手,我設法創建了一個簡單的滑塊,下面有一個值指示框,顯示滑塊的當前值。 我使用了以下代碼:
HTML
<div class="Slider">
<input type="range" id="slider" min="0" max="100">
</div>
<b><div id="Value">value: %</div></b>
JS
$(window).on("load", function(){
var slider = $("#slider");
slider.change(function(){
$("#Value").html (" value : " + this.value + "%");
});
});
我想在隱藏的多個div中使用相同的滑塊,當我點擊某些鏈接時,它會出現在相同的位置。 問題是雖然出現了滑塊和值框,但是由jQuery函數控制的輸出值將不起作用,但對於第一個div。
誰能告訴我要改變什么來解決這個問題?
問題是你有多個具有相同ID的滑塊: id="slider"
和具有相同ID的div: id="Value"
。 使用class而不是id:
<div class="Slider">
<input type="range" class="slider-input" min="0" max="100">
<b><div class="Value">value: %</div></b>
</div>
然后像這樣使用事件委托:
$('.Slider').on('change', '.slider-input', function(){
$(this).parent().find('.Value').html (" value : " + this.value + "%");
});
當然,如果您將CSS中的樣式設置為該元素,則需要將#slider
所有實例#slider
為.slider-input
。
一個工作的例子:
$(function() { $('.Slider').on('change', '.slider-input', function(){ $(this).parent().find('.Value').html (" value : " + this.value + "%"); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="Slider"> <input type="range" class="slider-input" min="0" max="100"> <b><div class="Value">value: %</div></b> </div> <div class="Slider"> <input type="range" class="slider-input" min="0" max="100"> <b><div class="Value">value: %</div></b> </div> <div class="Slider"> <input type="range" class="slider-input" min="0" max="100"> <b><div class="Value">value: %</div></b> </div>
使用類sliderInputRange可以將一個事件處理程序附加到多個input-elements。 屬性sliderInputRange允許指定接收值的div:
<div class="Slider"><input type="range" class="sliderInputRange" min="0"
max="100" data-value-id="value1"></div>
<b><div id="value1">value: %</div></b>
<div class="Slider"><input type="range" class="sliderInputRange" min="0"
max="100" data-value-id="value2"></div>
<b><div id="value2">value: %</div></b>
使用.attr()檢索value-element的id:
$(window).on("load", function(){
var slider = $(".sliderInputRange");
slider.change(function(){
var value_id= $(this).attr("data-value-id");
$("#" + value_id).html (" value : " + this.value + "%");
});
});
請試試你自己: https ://embed.plnkr.co/peXfdt/
動態添加滑塊。
var sliderComponent = '<div class="slider_container">' + '<input type="range" class="slider" min="0" max="100">' + '<br>' + 'value: <span class="value"></span>%' + '</div>'; var addSlider = function() { var currentSlider = $(sliderComponent); $(".sliders").append(currentSlider); currentSlider.on("change", ".slider", function() { $(this).siblings(".value").html( $(this).val() ); }); }; $(document).ready(function() { $("button").on("click", addSlider) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="add_slider">ADD</button> <div class="sliders"> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.