Javascript .addClass（）的问题。removeClass（）的问题

昨晚我花了几个小时试图找出这里出了什么问题，但没有成功。 我有一个div，当单击它时，它将展开并创建一个关闭按钮，该按钮将使div返回其原始状态。我通过添加和删除类来实现这一点。我遇到的问题是，当单击原始div（.talent）时，它会改变以填充包含的div。但是，当单击按钮（.btn）时，div不会返回其原始状态

JS-

---

首先删除该类，然后尝试添加一个类，看看它是否正常工作

$(".tree").removeClass("tree");
$(".tree").addClass("talent");

上述代码的计算结果将始终为TRUE

如果您想让它更好地工作，那么无论哪个元素有天赋类，都应该有另一个类，并且像这样工作（我会说使用.tree作为.other_类，但如果不看到html，就不能100%确定）：

---

另外，最好将btn click处理程序保持在第一个click处理程序之外。

尚未测试，但另一个问题可能是因为类

.tree

是动态附加的。还可以尝试在上使用

，如：

$(document).click('.tree .btn',function(){
     console.debug("WORKING!?!?!?");
     $(".tree").addClass("talent");
     $(".tree").removeClass("tree");
     $(".talents .talent").show();
     $(this).remove();
 });

事件绑定到相关元素，而不是特定类。在动态添加类的情况下，您需要委派事件

在您的情况下，如果放置
调试点
，您可以正确地看到问题。该事件向当时为
.talent
的父级冒泡。因此，首先，当单击
关闭
时，它会按预期工作，然后再次在
.talent
上触发单击事件，将
树
类再次放置在该元素上。事件委派应该解决这个问题

$(".talents").on('click', ".talent", function () {
    $(this)
        .removeClass("talent")
        .addClass("tree")
        .append("<div class=\"close btn\">X</div>");
    $(".talents .talent").hide();
});


$(".talents").on('click', ".tree .btn", function () {
    console.debug("WORKING!?!?!?");
    $(".tree").addClass("talent");
    $(".tree").removeClass("tree");
    $(".talents .talent").show();
    $(this).remove();
});

$（.talent”）。在（'click'，.talent'，函数（）{
$（本）
.removeClass（“人才”）
.addClass（“树”）
.附加（“X”）；
$（“.tallents.tallent”）.hide（）；
});
$（“.talients”）。在（'click'，“.tree.btn”，函数（）{
调试（“正在工作！？！？”）；
$（“.tree”）.addClass（“天赋”）；
$（“.tree”）.removeClass（“tree”）；
$（“.tallents.tallent”）.show（）；
$（this.remove（）；
});

还有一些HTML标记，我们可以测试一下吗？你能提供一个JSFIDLE吗？是的，对不起。稍等片刻，我将获得HTML。
if（$（this）.hasClass（“talent”）
将始终计算为代码中的
true
，因为您正在选择类
talent
中的所有元素，这些元素是类
talents
中元素的后代。下面是一个复制：等待您的小提琴测试上述内容！如果第一行删除了tree类，那么第二行是如何工作的？@Archer将对此进行评论
$(".talents .talent").click(function(){
  if ($(this).hasClass("talent")) {

$(".talents .other_class").click(function(){
  if ($(this).hasClass("talent")) {

$(document).click('.tree .btn',function(){
     console.debug("WORKING!?!?!?");
     $(".tree").addClass("talent");
     $(".tree").removeClass("tree");
     $(".talents .talent").show();
     $(this).remove();
 });

$(".talents").on('click', ".talent", function () {
    $(this)
        .removeClass("talent")
        .addClass("tree")
        .append("<div class=\"close btn\">X</div>");
    $(".talents .talent").hide();
});


$(".talents").on('click', ".tree .btn", function () {
    console.debug("WORKING!?!?!?");
    $(".tree").addClass("talent");
    $(".tree").removeClass("tree");
    $(".talents .talent").show();
    $(this).remove();
});