Question

我确定在处理javascript时这是常见问题，但我似乎无法找到解决方案。

我试图在＆＃34;卡＆＃34;上创建两个函数，但是通过卡片的状态来区分。

＆＃34;启动＆＃34;的一个功能卡和一个功能，以＃＆＃34;删除＆＃34;卡片。但是当我开始使用卡时，我无法使用相同的功能将其删除。

HTML

<div class="card started">click to hide</div>
<div class="card not-started">click to start</div>

JS

$(".card.not-started").on("click", function () {
    $(this).removeClass("not-started").addClass("started").html("click to hide");
});

$('.card.started').on("click", function () {
    $(this).fadeOut();
});

Answer 1

http://jsfiddle.net/wm99z4sj/1/

$(document).on("click", ".card.not-started", function () {
    $(this).removeClass("not-started").addClass("started").html("click to     hide");
});

$(document).on("click",'.card.started', function () {
    $(this).fadeOut();
});

试试这样。如果您将文档用作父文档，它将查找在运行时添加的该类的元素。

Answer 2

稍作修改即可解决此问题。

$(".card").on("click", function () {
    var el = $(this);
    if (el.hasClass("not-started")){
        el.toggleClass("not-started started").html("click to hide");
    } else {
        el.fadeOut();
    }
});

通过这种方式，您将始终在.card上委派一个点击处理程序，但根据您提供的类，它会更改功能。

<强> DEMO

如果您想保留2个单独的功能，可以从$(document.body)或$(".card").parent()委派代码：

var parent = $(".card").parent();
parent.on("click", ".not-started", function () {
    $(this).toggleClass("not-started started").html("click to hide");
});

parent.on("click", ".started", function(){
    $(this).fadeOut();
});

<强> DEMO

课后更改无法与元素交互

2 个答案: