>我在引导波普尔中有 html5 范围输入滑块,当我更改滑块时,我一直得到相同的值,我可以滑动范围滑块,但我无法获取更改的值
当我有相同的范围滑块时,它的容器中没有display:none
它运行良好,对我来说很奇怪
.HTML:
<div id="volume-popover" style="display:none;">
<input type="range" id="volume-bar" class="volume-bar" step="0.1" value="5" style="display:block;">
</div>
<div class="volume-up">
<button type="button" class="btn btn-default volume-btn" data-toggle="popover">Hello</button>
</div>
.JS:
$(function () {
var volumeBar = $("#volume-bar");
var popOverSettings_volume = {
placement: 'bottom',
container: '.volume-up',
html: true,
trigger: "manual",
selector: '.volume-btn',
content: function () {
return $('#volume-popover').html();
}
}
$('.volume-btn').popover(popOverSettings_volume).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(this).siblings(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide")
}
}, 100);
});
$('body').delegate(volumeBar, 'change', function () {
console.log(volumeBar.val());
});
});
小提琴:更新的小提琴
你克隆的html没有得到更新的值,你必须得到弹出框的值。尝试将以下代码更新到您的 JS:
$('body').delegate(volumeBar, 'change', function(evt) {
console.log($(".popover .volume-bar").val());
});
还有一件事,当您将 html 克隆到弹出框中时,它会将相同的 ID 附加到弹出窗口中,您在开始时已经提供给源div。所以总的来说,再次使用相同的id并不是一个好主意。所以我认为你可以参考这个小提琴,如果你觉得它适合你的要求,你可以这样使用:小提琴