Question

我有一些Javascript / Jquery可以创建145个方块。可以单击它们，它将改变方形的类。正方形也有一个id，从1到145.

这是制作按钮的脚本：

var number = 1

function makeButton() {
    var button1 = "<div id=\"number\" class=\"inner\" style=\"display:inline-block; margin-top:5px; margin-right: 5px;\"><p>!</p></div>"
    var button2 = button1.replace("number", number)
    $("#buttonz").append(button2);     // Append new elements
    number += 1
};

这是用于创建方块的脚本：（slot变量是145）

function addButtons(){
    for (i = 0; i < slots; i++) {
        makeButton();
            $(document).ready(function(){
                $('.inner').click(function(){
                            $(this).addClass("selected");
                            $(this).removeClass("inner");
    });
});

    }
}

         $(document).ready(function(){
                $('#clearSlots').click(function(){
                            $('.selected').addClass("inner");
                            $('.selected').removeClass("selected");
                            s = 0;

    });
});

我还有一个包含列

的MySQL数据库

ID
isTaken
pictureLink（已声明的变量）

我想要做的是当他们点击一个按钮（选择正方形）时，它应该从他们选择的任何方块中获取id，将isTaken设置为1（对应于id），然后将pictureLink上传到数据库。

pictureLink将链接到将替换正方形的图片（相同尺寸只是图片），如果有人按下按钮（选择正方形），它将设置为该图片。带图片的方块不会被选中，因为它们是别人的方形。最后，您应该可以根据需要选择任意数量的方块，并将它们全部更新。

如果这是令人困惑的话，感谢抱歉，谢谢！

Answer 1

将您的点击处理程序代码移出循环。它会为每个迭代的每个现有元素添加一个新的处理程序，因此第一个元素最终会绑定145个点击处理程序。

此外，无需在document.ready

中包含点击处理程序

在事件处理程序中，this将是单击的元素。您不能在页面中重复ID，但您可以获得元素的index

function addButtons() {
    for (i = 0; i < slots; i++) {
        makeButton();
    }
    // finish adding elements before adding click handler
    $('.inner').click(function () {
        // `this` is the element event occurred on
        var index = $(this).index();
        $.post('/path/to/server/script/', { taken: index}, function(resp){
            // validate resp and do anything else needed upon success of ajax here
        });

        $(this).addClass("selected");
        $(this).removeClass("inner");
    });
}

将CSS ID上载到数据库

1 个答案: