Question

原谅标题，不知道如何描述它，因为我不确定发生了什么：

如果你看看那个JS小提琴，我试图创建自己的轻推控件来理解插件是如何工作的。我的插件由$("#textbox1").DTJS()

调用

在页面上有一个项目，我的插件似乎工作正常，当我向页面添加多个实例时，代码似乎是按指数方式触发。（我基本上等待插件中的onClick事件）。

就目前而言，我已经拨打了$("#textbox1").DTJS()三次，如下所示：

$(document).ready(function () {
$("#textbox1").DTJS({
    'width': '75px',
    'max': '15',
    'min': '5'
});

$("#textbox2").DTJS({
    'width': '75px',
    'max': '15',
    'min': '5'
});


$("#textbox3").DTJS({
    'width': '75px',
    'max': '15',
    'min': '5'
});
});

如果我点击底部，它会增加/减少1，如果我点击中间它会增加2，如果我点击顶部，它会按3增加。

有人可以概述为什么会这样吗？

Answer 1

您正在通过课程应用您的活动，因此每次调用插件时，您都会将另一个事件绑定到.valueUp和.valueDown的所有实例。

在创建按钮并绑定存储副本中的事件时，请考虑保留副本。（如果您在同一范围内多次选择相同的元素，最好将其存储在内存中。）

如，

var up = $('<button class="valueUp valueHoldDown btn-mini btn-primary' + settings.btnClass + '">-></button>');
this.after(up);
up.click(function(){ 
    // code 
});

另请注意，当jQuery从jQuery.fn调用函数时，this引用jQuery对象而不是raw元素，因此您不需要执行$(this)。

Answer 2

只需改变一下：

$('.valueUp').click(...);

到此：

$(this).siblings('.valueUp').click(...);

.valueDown也是如此。

通过将事件绑定到只有.valueUp，您将它绑定到页面上的任何.valueUp，这解释了为什么事件在第一个上绑定了3次而在第二个上绑定了2次。

其他一些提示：

this已经是一个jQuery对象

正如Snuffleupagus所指出的那样，this已经是一个jQuery对象，所以你不需要调用$(this)。对于您添加到$.fn的任何功能都是如此。
返回this

通过在插件末尾返回this，您可以保持可链接性。例如，如果您将return this添加到插件的末尾，则可以执行以下操作：

$（“＃textbox1”）。DTJS（{'width'：'75px'，'max'：'15'，'min'：'5'}）。fadeIn（）;

Answer 3

我认为您遇到的问题是使用click事件处理程序：

$(".valueUp").click( function() {...})

此行中使用的选择器选择具有valueUp类的所有元素。但是，当您向页面添加更多微调控件时，会为页面上的每个按钮运行事件处理程序 - 导致该值被页面上的控件一样多。

有几种选择：

根据唯一ID将选择器更改为id，或更改选择器以使其相对于输入控件本身。

这是jsFiddle中的一个工作示例：http://jsfiddle.net/Xfp8a/

函数在jQuery插件中被多次调用

3 个答案: