Question

我创建了一个脚本，默认情况下会将事件监听器附加到图片集合。单击元素时，侦听器会换出另一个更改图像源的事件并将元素的id推送到数组，如果单击交换的图像，则会反转（源会更改后面的内容和最后一个元素）数组被删除）。有一个按钮可以通过设置默认源并重置事件监听器来“清除”所有图像，但它不会可靠地触发，有时会延迟触发，只会导致系列中的最后一个元素被收集。 / p> TL; DR：由于没有明显的原因，事件非常不可靠，我很想知道为什么会这样，以及我应该如何解决它。 JSFiddle和已发布的版本可在下面找到。

我上传了当前版本here，您可以通过选择多个表格，按“取消”并再次选择这些按钮来解决错误。通常，错误从第二次或第三次传递开始。

我还有fiddle。

台式机和笔记本电脑的布局有点古怪，因为它是专为手机屏幕设计的，但您将能够看到问题并检查代码，这应该不是问题。

代码块：

取消设置所有选定的表格：

    function tableClear() {

        //alert(document.getElementsByClassName('eatPlace')[tableResEnum].src);
        //numResTables = document.getElementsByClassName('eatPlace').src.length;

        tableArrayLength = tableArray.length - 1;

        for (tableResEnum = 0; tableResEnum <= tableArrayLength; tableResEnum += 1) {

            tableSrces = tableArray[tableResEnum].src;

            //alert(tableSrcTapped);

            if (tableSrces === tableSrcTapped) {
                tableArray[tableResEnum].removeEventListener('click', tableUntap);
                tableArray[tableResEnum].addEventListener('click', tableTap);
                tableArray[tableResEnum].src = window.location + 'resources/tableBase.svg';
            } /*else if () {

            }*/
        }

        resTableArray.splice(0, resTableArray.length);
    }

设置/取消设置特定表：

    tableUntap = function () {
        $(this).unbind('click', tableUntap);
        $(this).bind('click', tableTap);
        this.setAttribute('src', 'resources/tableBase.svg');
        resTableArray.shift(this);
    };

    tableTap = function () {
        $(this).unbind('click', tableTap);
        $(this).bind('click', tableUntap);
        this.setAttribute('src', 'resources/tableTapped.svg');
        resTableArray.push($(this).attr('id'));
    };

将'eatPlace'类中的元素转换为数组：

        $('.eatPlace').bind('click', tableTap);

    tableList = document.getElementsByClassName('eatPlace');

    tableArray = Array.prototype.slice.call(tableList);

表实例化：

   for (tableEnum = 1; tableEnum <= tableNum; tableEnum += 1) {

        tableImg = document.createElement('IMG');
        tableImg.setAttribute('src', 'resources/tableBase.svg');
        tableImg.setAttribute('id', 'table' + tableEnum);
        tableImg.setAttribute('class', 'eatPlace');
        tableImg.setAttribute('width', '15%');
        tableImg.setAttribute('height', '15%');

        $('#tableBox').append(tableImg, tableEnum);

        if (tableEnum % 4 === 0) {
            $('#tableBox').append("\n");
        }

        if (tableEnum === tableNum) {
            $('#tableBox').append("<div id='subbles' class='ajaxButton'>Next</div>");
            $('#tableBox').append("<div id='cazzles' class='ajaxButton'>Cancel</div>");
        }
    }

Answer 1

第一个错误是点击和取消表格。

当您将表格推送到阵列时，您可以推送其ID。

resTableArray.push($(this).attr('id'));

它将添加元素的id，具体取决于用户单击表的顺序。在取消它总是删除第一个表时。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift

resTableArray.shift(this);

因此，当用户点击表1,2,3时，如果取消单击3，则移位将删除表1。

让我们通过删除未开发的表

来解决这个问题

tableUntap = function () {
    $(this).unbind('click', tableUntap);
    $(this).bind('click', tableTap);
    this.setAttribute('src', 'http://imgur.com/a7J8OJ5.png');
    var elementID = $(this).attr('id');
    var elementIndex = resTableArray.indexOf(elementID);
    resTableArray.splice(elementIndex, 1);
};

所以你在失败后错过了一些牌桌。

好吧，让我们修复tableClear，

你有一个带有抽头表的数组，但是你正在主数组中搜索。

function tableClear() {

    tableLen = resTableArray.length;

    for (var i = 0; i < tableLen; i++) {
        var idString = "#" + resTableArray[i];

        var $element = $(idString);

        $element.unbind('click', tableUntap);
        $element.bind('click', tableTap);
        $element.attr("src", 'http://imgur.com/a7J8OJ5.png');

    }

    resTableArray = [];
}

我只搜索被点击的表格，然后只是取消它们并删除处理程序。小提琴：http://jsfiddle.net/r9ewnxzs/

你的错误是错误地删除了无法解读的元素。

事件侦听器无法在某些上下文中附加或删除

1 个答案: