我正在尝试将来自div 的点击事件委托给范围值,该事件高于我的输入 [type=range]。这意味着,如果我单击或触摸范围栏,div 的行为方式与范围滑块完全相同。
这是我的示例代码:
<div id="container" style="width: 200px; height: 200px; background-color: red;">
<div id="scale" style="height: 100px;">
Skala
</div>
<div style="height: 100px; text-align: center;">
<input id="range" type="range" min="10" max="100"/>
</div>
</div>
$(document).ready(function () {
$('#scale').click(function (event){
$('#range').trigger('change');
});
$('#range').change(function (event) {
console.log(event)
});
});
如果你愿意,这是小提琴:
http://jsfiddle.net/Ipad0214/ouf6x3xa/2/
我希望你理解我的问题,我想做什么。
问候帕特里克
基本思想是获取单击的鼠标位置(相对于div),将其缩放到所需的范围,然后更新滑块值。
$(document).ready(function () {
$('#scale').click(function (e) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
$('#range').val(relX).trigger('change');
});
$('#range').change(function (event) {
console.log(event)
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/ouf6x3xa/5/
缩放涉及相对于元素宽度获取单击的位置,然后缩放和偏移到滑块范围。
这个使用div 的整个宽度作为滑块宽度,但您可能希望它是平行的。
示例:http://jsfiddle.net/TrueBlueAussie/ouf6x3xa/7/