Question

所以我正在研究jQuery，它通过click事件获取元素id。然后，这会触发一个与弃用的.toggle（）类似的函数 - 它会在第一次单击时向下滑动元素，并在第二次单击时向上滑动该元素。但是，有一个错误导致元素上下滑动单击的次数。例如，如果这是我第二次使用.clickToggle函数，则元素（表格）在稳定之前上下滑动两次，依此类推。我怀疑它与事件对象有关，e，跟踪点击次数 - 即我可能不应该设置id = e.target.id--但我不知道如何修复仍然得到我需要的相关元素ID。

这是相关的clickToggle插件（由stackoverflow上的答案提供）。

(function($) {
        $.fn.clickToggle = function(func1, func2) {
            var funcs = [func1, func2];
            this.data('toggleclicked', 0);
            this.click(function() {
                var data = $(this).data();
                var tc = data.toggleclicked;
                $.proxy(funcs[tc], this)();
                data.toggleclicked = (tc + 1) % 2;
            });
            return this;
        };
    }(jQuery));

以下是符合上述说明的错误代码。

$(document).click(function(e) { 
        //get the mouse info, and parse out the relevant generated div num 
        var id =  e.target.id; 
        var strId = id.match(/\d$/); 

        //clickToggle the individual table
        $('#showTable' + strId).clickToggle(function () {
            $('#table' + strId).slideDown();
            $('#table' + strId).load('files.php');      
        },
        function () {
            $('#table' + strId).slideUp();
        }); 
    });//close mousemove function

非常感谢任何帮助。谢谢。

Answer 1

问题是，每次调用click时，您都要为元素注册新的clickToggle处理程序：

this.click(function() {...

在每次后续单击时，您将添加另一个处理程序，以及调用所有以前的处理程序。 Bleagh。

最好直截了当： (DEMO)

var showTable = function($table) {
    $table.slideDown();
    $table.load('files.php');
    $table.removeClass('hidden');
};

var hideTable = function($table) {
    $table.slideUp();
    $table.addClass('hidden');
};

$(document).click(function (e) {
    //get the mouse info, and parse out the relevant generated div num 
    var id = e.target.id;
    var strId = id.match(/\d$/)[0];
    var $table = $('#table' + strId);

    if ($table.hasClass('hidden')) {
        showTable($table);
    } else {
        hideTable($table);
    }
});

点击事件对象跟踪问题

1 个答案: