3

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

http://jsfiddle.net/KpmyR/7/

如果您查看那个 JS fiddle，我正在尝试创建自己的轻推控件以了解插件的工作原理。我的插件由$("#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。

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

4

3 回答 3

3

您正在通过一个类应用您的事件，因此每次调用插件时，您都会将另一个事件绑定到.valueUpand的所有实例.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 对象而不是原始元素，因此您不需要这样做$(this)。

于 2013-04-16T15:38:48.840 回答
2

只是改变这个：

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

对此：

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

对于.valueDown.

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

其他几个提示：

  • this已经是一个 jQuery 对象

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

  • 返回this

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

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

于 2013-04-16T15:40:38.193 回答
0

我认为您遇到的问题与单击事件处理程序有关：

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

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

有几个选项：

将选择器更改为基于唯一 id 的 id，或更改选择器以使其与输入控件本身相关。

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

于 2013-04-16T15:46:32.433 回答