Question

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

JS -

$(".talents .talent").click(function(){
  if ($(this).hasClass("talent")) {
    $(this)
      .removeClass("talent")
      .addClass("tree")
      .append("<div class=\"close btn\">X</div>");

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

CSS -

.talents{
  border:1px solid white;
  border-radius:10px;
  overflow:hidden;

  height:165px;

  margin:10px;
}

.talents .talent{
  text-align:center;
  font-size:2.4em;
  height: 50px;
  width: 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: inline-block;
  border: 3px solid white;
  border-radius: 15px;
  margin: 5px 7px 5px 7px;
}

.tree{
  position:relative;

  width:100%;
  height:100%;
}

Answer 1

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

上面的代码总是值得评估

如果你想让它更好地工作，那么任何有天赋的元素也应该有另一个类，并且像这样工作（我会说使用.tree作为.other_class但是不能100％确定而不看html ）：

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

此外，将btn点击处理程序保留在第一个单击处理程序之外是更好的做法。

Answer 2

事件被绑定到有问题的元素，而不是特定的类。在动态添加类时，您需要delegate the events in such cases。

在您的情况下，如果您放置debug point，则可以正确查看问题。事件冒泡到父母，当时是.talent。首先，点击close时，它会按预期工作，但会再次触发.talent上的点击事件，这会再次将tree类放在该元素上。事件委托应该解决这个问题。

$(".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();
});

<强> Check Fixed Fiddle

Answer 3

尚未测试，但另一个问题可能是因为动态附加了类.tree。也可以尝试使用on：

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

Answer 4

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

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

.addClass（）。removeClass（）的问题

4 个答案: