Question

我正在尝试删除其中一个元素的“功能”。

这是生成代码的html / php：

        <table>
        <?php for($i = 0; $i < 10; $i++){ ?>
            <tr>
                <?php for($k = 0; $k < 10; $k++) {?>
                    <td>asd</td>
                <?php }?>
            </tr>
        <?php } ?>
    </table>

这是jQuery：

            $("td:not(done)").click(function(){
                $(this).addClass("done");
                if(blue){
                    $(this).css("background-color", "blue");
                    blue = false;
                } else {
                    $(this).css("background-color", "red");
                    blue = true;
                }
            });

尝试将类添加到已单击的td元素中，以便在首次单击后不起作用。但无法使其发挥作用。

Answer 1

更新代码

使用.hasClass()

$("td").click(function () {
    if (!$(this).hasClass('done')) {
        $(this).addClass("done");
        if (blue) {
            $(this).css("background-color", "blue");
            blue = false;
        } else {
            $(this).css("background-color", "red");
            blue = true;
        }
    }
});

您忘了在.班级

中添加done

class-selector文档

$("td:not(.done)").click(function(){
          ^
                $(this).addClass("done");
                if(blue){
                    $(this).css("background-color", "blue");
                    blue = false;
                } else {
                    $(this).css("background-color", "red");
                    blue = true;
                }
            });

Answer 2

根据我的理解，td只能点击一次，因此您需要的是.one()

$("td").one('click', function () {
    $(this).addClass("done");
    if (blue) {
        $(this).css("background-color", "blue");
        blue = false;
    } else {
        $(this).css("background-color", "red");
        blue = true;
    }
});

或使用未完成过滤器的事件委派

$("table").on('click', 'td:not(.done)', function () {
    $(this).addClass("done");
    if (blue) {
        $(this).css("background-color", "blue");
        blue = false;
    } else {
        $(this).css("background-color", "red");
        blue = true;
    }
});

Answer 3

如果你真的不需要添加类，那么你可以使用“one”方法为click事件添加一个处理程序，这样，它只会被执行一次

http://api.jquery.com/one/

    $("td").one("click",(function(){
        if(blue){
            $(this).css("background-color", "blue");
            blue = false;
        } else {
            $(this).css("background-color", "red");
            blue = true;
        }
    });

Answer 4

我会使用委托，因此每次点击时都会评估目标选择器：

$('table').on('click','td:not(.done)', function(){
        $(this).addClass("done");
        if (blue) {
            $(this).css("background-color", "blue");
            blue = false;
        } else {
            $(this).css("background-color", "red");
            blue = true;
        }
});

试图删除元素的功能

4 个答案: