Question

我正在尝试重新创建一个颜色猜测游戏，你点击随机颜色的div，你必须猜测它要求哪一个。但是，当我尝试通过使用.append函数添加更多div来添加难度时，div不响应点击。我尝试过使用.on（＆＃34;点击＆＃34;，function（）{}），但仍然无法正常工作。

$(function() {
  var initialTrys = 58;
  var difficulty = 9;
  //End of Game Settings
  var trys = initialTrys;
  $("#col").html(getRandomColor());
  $("#try").html(trys);
  run(difficulty);
  cor();
  $(".color").on("click", function() {
    var thisColor = $(this).css("backgroundColor");
    if (trys > 0) {
      trys--;
      $("#try").html(trys);
    } else if (trys === 0) {
      $("#alert").html("No More Tries").css("color", "red");
      // e.preventDefault();
      // return false;
    }
    console.log("clicked");
    if (thisColor == $("#col").html() && trys !== 0) {
      $("#alert").html("You Got It!").css("color", "green");
      $(this).siblings().addClass("clicked").css("backgroundColor", thisColor);
      console.log("correct");
    } else {
      $(this).addClass("clicked");
    }
  });

  $("#reset").on("click", function() {
    trys = initialTrys;
    $("#alert").html("");
    $("#try").html(trys);

    $(".color").each(function() {
      $(this)
        .addClass("color")
        .removeClass("clicked")
        .css("backgroundColor", getRandomColor());
    });
    $("#col").html(getRandomColor());
    cor();
  });
  function getRandomColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    var color = "rgb(" + r + ", " + g + ", " + b + ")";
    return color;
  }
  function cor() {
    $(".color")
      .eq(Math.floor(Math.random() * $(".color").length))
      .css("backgroundColor", $("#col").html());
  }
  $("#diffSlide").on("change", function() {
    if ($(this).val() == 0) {
      $("#diff").html("Easy").css("color", "green");
      $(".colorWrapper").children().remove();
      run(difficulty);
    } else if ($(this).val() == 1) {
      $("#diff").html("Medium").css("color", "orange");
      $(".colorWrapper").children().remove();
      run(difficulty*2);
    } else if ($(this).val() == 2) {
      $("#diff").html("Hard").css("color", "red");
      $(".colorWrapper").children().remove();
      run(difficulty * 3);
    }
  });
  function randColor() {
    $(".color").each(function() {
      $(this).css("backgroundColor", getRandomColor());
    });
  }
  function run(difficulty) {
    for (var i = 1; i <= difficulty; i++) {
      $(".colorWrapper").append("<div class='color'></div>");
      randColor();
      if (i % 3 === 0) {
        $(".colorWrapper").append("<br />");
      }
    }
  }
});

注意：当滑块不移动时，它可以正常工作，就在您尝试更改难度时。

Answer 1

在追加新附加的div时，您似乎没有附加点击处理程序。将您的$(".color").on("click", function() {...}抽象为：

function attachClickHandler(){
  $(".color").on("click", function() {...} //from ln 10 of your code
}

然后你可以在ln 10和attachClickHandler()追加后调用run()。这将在代码最初运行时以及在附加新div之后附加单击处理程序。

Answer 2

我认为这可能对你有用。

$(document).on("click", ".color", function(){

})

单击附加的div时，即使使用.on也没有任何反应

2 个答案: