Question

我正在使用名为knobknob.js的jQuery插件，这非常棒。唯一的缺点是，如果我在多个对象上调用插件，那么它会尝试对所有对象进行操作。如何更改我的代码才能使用“this”$（'。control'）代替“all”$（'。control'）对象？

$('.control').knobKnob({
    snap : 1,
    value: 30,
    turn : function(ratio){
        numBars = Math.round(colorBars.length*ratio);

        // Update the dom only when the number of active bars
        // changes, instead of on every move

        var perc = Math.ceil(ratio * 100);
        $(".dimper").text(perc);


        if(numBars === lastNum){
            return false;
        }
        lastNum = numBars;

        colorBars.removeClass('active').addClass('gray').slice(0, numBars).addClass('activer').removeClass('gray');
    }
});

Answer 1

您可以更改Jquery选择器以引用页面上的某些元素ID：

<div id="control1"></div>



$('#control1').knobKnob({
  yada yada
});

Answer 2

似乎最简单的修复（不会改变太多）就是这样：

$('.control').each(function(i, el){
    $(el).knobKnob({
        snap : 1,
        value: 30,
        turn : function(ratio){
            numBars = Math.round(colorBars.length*ratio);

            // Update the dom only when the number of active bars
            // changes, instead of on every move

            var perc = Math.ceil(ratio * 100);
            $(".dimper").text(perc);


            if(numBars === lastNum){
                return false;
            }
            lastNum = numBars;

            colorBars.removeClass('active').addClass('gray').slice(0, numBars).addClass('activer').removeClass('gray');
        }
    });
})

将jQuery函数设置为＆＃34;这个＆＃34;的上下文 - knobknob.js

2 个答案: