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")) {

上記のコードは常に TRUE と評価されます

これをよりうまく機能させたい場合は、才能のクラスを持つ要素には別のクラスも必要であり、次のように同様に機能する必要があります(.treeを.other_classとして使用すると言いますが、htmlを見ないと100%確実ではありません):

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

また、btn クリック ハンドラーを最初のクリック ハンドラーの外に置くことをお勧めします。

于 2013-08-06T17:03:28.167 に答える
-2

最初にクラスを削除してから、クラスを追加してみて、それが機能しているかどうかを確認してください。

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