昨夜、ここで何が問題なのかを突き止めようと数時間を費やしましたが、うまくいきませんでした。クリックすると展開され、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%;
}