1

昨晚我花了几个小时试图找出这里出了什么问题，但没有成功。我有一个 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%;
}
4

4 回答 4

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

上述代码将始终评估为真

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

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

此外，最好将 btn 单击处理程序保留在第一个单击处理程序之外。

于 2013-08-06T17:03:28.167 回答
2

事件绑定到相关元素，而不是特定类。您需要delegate the events in such cases动态添加类。

在你的情况下，如果你放一个debug point你可以正确地看到问题。事件冒泡到当时的父级.talent。因此，首先它在 click on 时按预期工作close，但随后再次触发 click 事件，.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();
});

检查固定小提琴

于 2013-08-06T17:08:37.777 回答
0

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

$(document).click('.tree .btn',function(){
     console.debug("WORKING!?!?!?");
     $(".tree").addClass("talent");
     $(".tree").removeClass("tree");
     $(".talents .talent").show();
     $(this).remove();
 });
于 2013-08-06T17:06:39.213 回答
-2

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

$(".tree").removeClass("tree");
$(".tree").addClass("talent");
于 2013-08-06T17:03:21.977 回答