Question

我正在研究这个简单的插件用于练习目的，我遇到了以下问题：基本上，我希望有多个图像滑块由相同的JS代码运行，但显然彼此独立。我目前设法实现这一目标的方法是在按钮的Click处理程序中为“激活”特定滑块的“左”和“右”按钮设置Click处理程序。因为某些原因，如果我在“激活”按钮处理程序之外有“左/右”按钮的处理程序，它们就不会被执行。

WORKS：

    var $leftArrow, $rightArrow;

    $('item').click(function() {
       var itemNum = $(this).index() + 1; 
       $leftArrow = $('#item' + itemNum + ' .left-arrow');
       $rightArrow = $('#item' + itemNum + ' .right-arrow');
    });

    $leftArrow.click(...);
    $rightArrow.click(...);

不工作：

int a=b;

所以我的问题是;以这种方式做事是不好的做法吗？如果用户激活'item1'滑块，它会开始占用额外的内存，然后激活'item2'滑块，依此类推。如果是这样，有什么更好的方法来实现这一目标。

很抱歉这么长的问题，我真的很感谢你花时间阅读这一切。：）

注意：假设一次只能激活一个滑块。

Answer 1

对于任何也在努力解决这个问题的人来说，当你嵌套点击处理程序时，每个人都开始在一个单独的线程上运行。请注意以下内容：

http://jsfiddle.net/054nkc2a/

如果单击“第一个”按钮，则会激活“第二个”按钮的单击处理程序。单击“第二个”按钮后，其单击处理程序中的函数将运行ONCE。

但是，如果单击“第一个”按钮两次，然后单击“第二个”按钮;第二个按钮的点击处理程序中的功能运行TWICE！

阻止这种情况发生的一种可能的解决方案是让第二个按钮解开＆＃39;在它完成它应该做的之后。因此，如果单击“第一个”按钮，然后单击“第二个”按钮，然后单击“取消绑定”，则“第二个”按钮现在应该没有单击处理程序（就像最初加载页面时一样）。然后重复这个过程。

我希望这可以帮助别人，因为这恰好是我问题的解决方案：）

HTML：

<button id="button1">First</button>
<button id="button2">Second</button>
<button id="unbind">Unbind</button>

<div class="text"></div>

JS：

$(document).ready(function() {

    $text = $('.text');

    $('#button1').click(function() {
        $text.append('<p>First</p>')

        $('#button2').click(function() {
            $text.append('<p>Second</p>')
        });

        $('#unbind').click(function() {
            $('#button2').unbind('click');
        });
    });

});

JavaScript中的嵌套点击处理程序是一种不好的做法？

1 个答案: