你可能已经知道我是 jQuery 的新手,所以不属于这个主题的代码改进仍然是非常允许的。
这是我的 HTML 代码:
<div style="display: inline-block; width: 120px;">
<div>
Bananas:
<br />
<input id="bananas_amount" />
<input id="bananas_amount_percent" />
</div>
<br />
<div id="bananas" style="height:200px;"></div>
</div>
这是我可怕的 js 代码:
$( "#bananas" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 20,
step: 5,
slide: function( event, ui ) {
$( "#bananas_amount_percent" ).val( ui.value + " %" );
// the code displays a percentage by standart, but I need the real value, too:
var bananas_amount_percent = $( "#bananas_amount_percent" ).val();
var bananas_amount_percent = bananas_amount_percent.replace(" %", "");
var bananas_amount = Math.round((weight / 100) * bananas_amount_percent);
$( "#bananas_amount" ).val( bananas_amount + " g" );
}
});
$( "#bananas_amount_percent" ).val( $( "#bananas" ).slider( "value" ) + " %" );
// again the real value (else the value would not be updatet on reload-reset)
var bananas_amount_percent = $( "#bananas_amount_percent" ).val();
var bananas_amount_percent = bananas_amount_percent.replace(" %", "");
var bananas_amount = Math.round((weight / 100) * bananas_amount_percent);
$( "#bananas_amount" ).val( bananas_amount + " g" );
(重量为200)
但是,它正在工作,除了一个“小”细节:不是鼠标滚轮!我已经发现我需要这个扩展:https ://github.com/brandonaaron/jquery-mousewheel/downloads
但我真的完全不知道如何在我的 Slider 上实现它(顺便说一句,我的网站上有 5 个)。
请帮助,谢谢!