Question

$(document).ready(function() {

var characters = [["Obi Wan Kenobi", 'obi', '120'], ["Luke Skywalker", 'luke', '100'], ["Darth Sidious", 'sidious', '150'], ["Darth Maul", 'maul', '180']];

for ( i = 0; i < characters.length; i++) {

  // Inside the loop...

  // 2. Create a variable named "charBtn" equal to $("<button>");

  var charBtn = $("<pre><button></pre>");

  charBtn.addClass("char-button char col-md-3");
  charBtn.addClass(characters[i][1]);

  charBtn.attr("id", characters[i][1]);

  charBtn.text(characters[i][0] + "\n" + characters[i][2]);

  charBtn.css("height", "200px");
  charBtn.css("color", "black");
  charBtn.css("font-size", "25px");
  charBtn.css("font-weight", "bold");
  charBtn.css("text-align", "center");
  charBtn.css("padding-top", "100px");
  charBtn.css("-webkit-text-stroke", "1px red");

  $("#buttons").append(charBtn);
  console.log(charBtn);
}

$(".obi").on("click", function() { 
$("#selection").append(this);
$("#choices").append("<h3>Choose your enemy!</h3>");
$("#choices").append(charBtn, $("#luke"));
$("#choices").append(charBtn, $("#sidious"));
$("#choices").append(charBtn, $("#maul"));
console.log(charBtn);

$("#obi").unbind("click");
$("#luke").unbind("click");
$("#sidious").unbind("click");
$("#maul").unbind("click");

$(".luke").on("click", function() {
$("#defender").append((charBtn , $("#luke")));
$("#obi").unbind("click");
$("#luke").unbind("click");
$("#sidious").unbind("click");
$("#maul").unbind("click");
console.log(charBtn);
})
$(".sidious").on("click", function() {
$("#defender").append((charBtn , $("#sidious")));
$("#obi").unbind("click");
$("#luke").unbind("click");
$("#sidious").unbind("click");
$("#maul").unbind("click");
})
$(".maul").on("click", function() {
$("#defender").append((charBtn , $("#maul")));
$("#obi").unbind("click");
$("#luke").unbind("click");
$("#sidious").unbind("click");
$("#maul").unbind("click");
})

})

$(".maul").on("click", function() {
$("#selection").append(this);

$("#choices").append("<h3>Choose your enemy!</h3>");
$("#choices").append(charBtn, $("#luke"));
$("#choices").append(charBtn, $("#obi"));
$("#choices").append(charBtn, $("#sidious"));



$("#obi").unbind("click");
$("#luke").unbind("click");
$("#sidious").unbind("click");
$("#maul").unbind("click");

$(".luke").on("click", function() {
$("#defender").append((charBtn , $("#luke")));
$("#obi").unbind("click");
$("#luke").unbind("click");
$("#sidious").unbind("click");
$("#maul").unbind("click");
})
$(".obi").on("click", function() {
$("#defender").append((charBtn , $("#obi")));
$("#obi").unbind("click");
$("#luke").unbind("click");
$("#sidious").unbind("click");
$("#maul").unbind("click");
})
$(".sidious").on("click", function() {
$("#defender").append((charBtn , $("#sidious")));
$("#obi").unbind("click");
$("#luke").unbind("click");
$("#sidious").unbind("click");
$("#maul").unbind("click");
})

});

我遇到的问题是按钮变量＆＃34; charBtn＆＃34;正在加载时创建的是坚持阵列中的最后一个元素，我不知道为什么...... 在我将按钮附加到按钮div后的第一个控制台日志中，它记录了创建的所有四个按钮，但是在接下来的两个日志中我运行它只显示＆＃34; .maul＆＃34;。我很确定因为它是循环中的最后一次迭代，所以它坚持变量。当我试图将maul追加到选择div并将所有其他按钮添加到防御者div时，它也会拖延到防御者div。在评论完其余的人之后，maul会自己附加到选择div，但是如果我然后尝试将其他人追加到防御者div，它会覆盖maul并将他带下来......任何人都可以帮助解释为什么maul坚持charBtn变量？有解决方案吗

聚苯乙烯。我知道这是硬编码的很多方面我仍然是相当新的javascript / jQuery我仍然试图抓住图书馆。

Answer 1

好的，我只是回答了我自己的问题，也许我需要在桌面上使用橡皮鸭...... 发生这种情况的原因是因为我在循环中回收变量charBtn，所以是的，它坚持到最后一次迭代。当我在下面引用它以附加到div时，不需要像我在做的那样调用变量..

$(".maul").on("click", function() {
$("#selection").append(this);

$("#choices").append("<h3>Choose your enemy!</h3>");
$("#choices").append(charBtn, $("#luke"));
$("#choices").append(charBtn, $("#obi"));
$("#choices").append(charBtn, $("#sidious"));

我可以删除该段代码中的charBtn，只需像这样引用id ...

  $(".maul").on("click", function() {
  $("#selection").append(this);
  $("#choices").append("<h3>Choose your enemy!</h3>");
  $("#choices").append($("#luke"));
  $("#choices").append($("#obi"));
  $("#choices").append($("#sidious"));

如果你有任何关于如何解决这个问题的提示，我会非常感激。

为什么我的按钮变量附加到我的代码中的特定元素？

1 个答案: