Question

我的总体目标是根据图像创建测试。但我很早就被困住了。想法是出现图像，用户必须单击按钮才能选择正确的答案。他们点击哪个按钮，图像被另一个图像随机替换。我遇到的问题是，当图像被新图像随机替换时，按钮（与新图像在同一个div中）不起作用。因此，用户只能使用第一个div中的按钮，然后当替换此div时，它们无法通过新的随机div。我是论坛的新手..但如果有人能帮助我，我将非常感激。

这是我的HTML。

<div id = 'suitcase'> 
   <img src ='https://upload.wikimedia.org/wikipedia/commons/c/ce/Suitcase_750x500.jpg' width = '400'/> 
   <ul> <button id = 'correct1'> suitcase </button>  &nbsp; &nbsp; <button class = 'incorrect1'> backpack </button> &nbsp; &nbsp; <button class = 'incorrect1'> handbag </button> </ul>
</div>;

<div id = 'printer'> 
   <img src = 'http://cdn2.pcadvisor.co.uk/cmsdata/reviews/3598061/HP_Envy_5640_e-All-in-One.jpg' width = '400'/> 
   <ul> <button id = 'correct2'> printer </button>  &nbsp; &nbsp; <button class = 'incorrect2'> photocopier </button> &nbsp; &nbsp; <button class = 'incorrect2'> computer </button> </ul>
</div>;

<div id = 'desk'>
   <img src = 'https://www.directofficesupply.co.uk/components/com_virtuemart/shop_image/product/H4P3.jpg' width = '400'/>
   <ul> <button class = 'incorrect3'> printer </button>  &nbsp; &nbsp; <button class = 'correct3'> desk </button> &nbsp; &nbsp; <button class = 'incorrect3'> computer </button> </ul>
</div>

这是我的Javascript和JQuery

$(window).load(function() {
  $("#printer").hide();
});

$(window).load(function() {
  $("#desk").hide();
});

var image1 = document.getElementById("desk").innerHTML;
var image2 = document.getElementById("suitcase").innerHTML;
var image3 = document.getElementById("printer").innerHTML;

var imageList = [image1, image2, image3]

function getRandomImage() {
  var random = imageList[Math.floor(Math.random() * imageList.length)];
  return random;
}

var randomImage = getRandomImage();


$("#correct1").click(function() {
  $(this).css({
    "background": "blue"
  });
  setTimeout(function() {
    $("#suitcase").html(randomImage);
  }, 500);

  $("#correct2").click(function() {
    $(this).css({
      "background": "blue"
    });
    setTimeout(function() {
      $("#printer").html(randomImage);
    }, 500);
  });

  $("#correct3").click(function() {
    $(this).css({
      "background": "blue"
    });
    setTimeout(function() {
      $("#desk").html(randomImage);
    }, 500);
  });

});

$(".incorrect1").click(function() {
  $(this).css({
    "background": "red"
  });
  setTimeout(function() {
    $("#suitcase").html(randomImage);
  }, 500);
});


$("#correct2").click(function() {
  $(this).css({
    "background": "blue"
  });
  setTimeout(function() {
    $("#printer").html(randomImage);
  }, 500);
});

$(".incorrect2").click(function() {
  $(this).css({
    "background": "red"
  });
  setTimeout(function() {
    $("#printer").html(randomImage);
  }, 500);
});

$("#correct3").click(function() {
  $(this).css({
    "background": "blue"
  });
  setTimeout(function() {
    $("#desk").html(randomImage);
  }, 500);
});

$(".incorrect3").click(function() {
  $(this).css({
    "background": "red"
  });
  setTimeout(function() {
    $("#desk").html(randomImage);
  }, 500);
});

我做错了什么？!!

Answer 1

编写代码的方式，只知道文档加载的按钮。生成的按钮不知道。您必须使用.on或.delegate

我在这里写了一个样本。你可以改变你的所有人。

您可以使用.on的方式：

$("#correct2").on('click', function(){
    $(this).css({
        "background": "blue"
    });setTimeout(function(){
        $("#printer").html(randomImage);
    },
    500);
});

您可以使用.delegate的方式（在jQuery v3中已弃用）：

$('body').delegate('#correct2', 'click', function(){
    $(this).css({
        "background": "blue"
    });setTimeout(function(){
        $("#printer").html(randomImage);
    },
    500);
});

Answer 2

我会为第一个案例做一个例子，一旦你理解它变得容易复制。

鉴于第一个例子我们将修复＆＃34;错误＆＃34;按钮。

HTML

<div id = 'suitcase'> 
   <img src ='https://upload.wikimedia.org/wikipedia/commons/c/ce/Suitcase_750x500.jpg' width = '400'/> 
   <ul> <button id = 'correct1'> suitcase </button>  &nbsp; &nbsp; <button class = 'incorrect1'> backpack </button> &nbsp; &nbsp; <button class = 'incorrect1'> handbag </button> </ul>
</div>

JS

$(".incorrect1").click(function() {
  $(this).css({
    "background": "red"
  });
  setTimeout(function() {
    $("#suitcase").html(randomImage);
  }, 500);
});

这里的问题是click事件被绑定到＆＃34; wrong1＆＃34;文档加载按钮。一旦删除它并替换为另一个按钮，即使它具有相同的html类/ id，该事件也已被绑定，并且它不会重新绑定＆＃34;自动。

我的建议是你将事件绑定到一个外部元素，然后过滤它调用＆＃34; wrong1＆＃34;选择器（了解有关.on()函数的更多信息）：

$("#suitcase").on("click", ".incorrect1", function() {
  $(this).css({
    "background": "red"
  });
  setTimeout(function() {
    $("#suitcase").html(randomImage);
  }, 500);
});

那么，这里发生了什么？我将事件绑定到整个行李箱div。然后我将事件类型指定为＆＃34;点击＆＃34;并告诉它只检查我的＆＃34;＃suitcase＆＃34;中的任何元素的点击。匹配我的选择器＆＃34; .incorrect＆＃34;。

这样，事件被绑定到一个不被删除的元素（你的行李箱div）。即使你删除那里的所有子节点然后替换，事件监听器也绑定到外部div，所以我之前提出的问题不再是问题。

希望它有所帮助！

Javascript - 用另一个随机div替换div（按钮不在新div中工作）

2 个答案: