编辑 - 感谢下面一位友好的评论者,我设法解决了这个问题。事实证明这是非常基本的,因为我没有在正确的位置调用我的函数。我将函数调用移至打开我正在使用 DragDealer 的 div 组的 click 事件,现在它可以工作了。
我正在尝试为我正在构建的网站上的滑块设置Dragdealer插件
在我稍微调整浏览器窗口大小之前,我的滑块按钮是不可移动的。滑块本身在页面加载时位于隐藏的 div 中,因此我已将对 DragDealer 的调用连接到它的父 div 打开时,但它仍未初始化。
<div id="assetTable">
<div id="assetTableHeaders">
<div class="investmentHeading odd">Investment option</div>
<div class="investmentHeading even">Allocation</div>
</div>
<div class="investmentOption" id="global_property">
<div class="investmentTitle"><a href="#">Global Property</a></div>
<div class="investmentSlider">
<div class="slider short">
<div class="slider-bg">
<div class="slider-indicator"><div class="active"> </div></div>
<div id="slider_global_property" class="dragdealer">
<div class="handle ir" style="left: 208px;">Drag</div>
</div>
</div>
</div>
</div>
<div class="investmentInput">
<input type="text" id="input_global_property" class="investmentPercent" name="input_global_property" value="0%">
</div>
</div>
</div>
“asseTtable”被隐藏,直到通过 jquery 由 onclick 处理程序展开
function setUpSliders() {
var val_global_property = document.getElementById('input_global_property');
var sliderGlobalProperty = new Dragdealer('slider_global_property',
{
steps: 100,
animationCallback: function(x, y)
{
val_global_property.value = (Math.round(x * 100) + '%');
}
});
$('#input_global_property').change(function(){
sliderGlobalProperty.setStep(stripPercentages());
return false;
});
}
$('#investmentOption_selfSelect').click(function(){
setUpSliders();
});