[英]Convert mootools code to jquery
我有一個滑塊,我正在操縱它的顏色和漸變。
它使用mootools,一切正常。
var inputs = document.getElementsByTagName('input');
inputs = Array.splice(inputs, 0);
inputs.forEach(function (item) {
if (item.type === 'range') {
item.onchange = function () {
value = (item.value - item.min)/(item.max - item.min)
item.style.backgroundImage = [
'-webkit-gradient(',
'linear, ',
'left top, ',
'right top, ',
'color-stop(' + value + ', #0B8CDD), ',
'color-stop(' + value + ', #898989)',
')'
].join('');
};
}
});
我想將Mootools js代碼轉換為Js / Jquery。
請幫幫我。
嘗試
使用元素和屬性選擇器來定位input type="range"
元素,使用change()方法注冊change事件處理程序然后使用.css()來設置css屬性
$('input[type="range"]').change(function () {
//`this` inside the handler refers to the current input element
var value = (this.value - this.min) / (this.max - this.min);
//use `.css()` to set the css properties
$(this).css('backgroundImage', [
'-webkit-gradient(',
'linear, ',
'left top, ',
'right top, ',
'color-stop(' + value + ', #0B8CDD), ',
'color-stop(' + value + ', #898989)',
')'].join(''));
});
演示: 小提琴
如果Mootools有效,為什么要改變?
普通的javascript:
var inputs = document.querySelectorAll('input[type="range"]');
for (var i = 0; i < inputs.length; i++) {
var item = inputs[i];
item.addEventListener('change', function () {
value = (this.value - this.min) / (this.max - this.min)
this.style.backgroundImage = [
'-webkit-gradient(',
'linear, ',
'left top, ',
'right top, ',
'color-stop(' + value + ', #0B8CDD), ',
'color-stop(' + value + ', #898989)',
')'].join('');
});
};
這是另一個版本 ,非常litle jQuery:
$('input[type="range"]').change(function () {
value = (this.value - this.min) / (this.max - this.min)
this.style.backgroundImage = [
'-webkit-gradient(',
'linear, ',
'left top, ',
'right top, ',
'color-stop(' + value + ', #0B8CDD), ',
'color-stop(' + value + ', #898989)',
')'].join('');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.