Question

我无法使用下拉选项的值来显示页面中的元素。我试图在下拉列表中使用用户给出的数字来重复显示8个随机“企鹅”图像中的1个。在这里，我可以初步获得下拉列表的第一个值，但是我想在选择新值后更改页面。我似乎也无法在这里获得我的第二个循环以显示每个图像。只有我的HTML yeti课程出现。

$(document).ready( function() {

    //This code will run after the page loads
    $(function() {
        var maxPenguin = 64;
        var penguinCount = 8;

      for (var i = 2; i < maxPenguin; i++) {
        $('select').append('<option value="' + i + '">' + i + '</option>');  
      }

    penguinCount = document.getElementById("penguinsSelected").value; 
      alert(penguinCount);
    });

    $(function displayPenguins(penguinCount){
        for(var i = 0; i < penguinCount; i++) {
            var penguin = document.createElement("penguin" + Math.ceil(Math.random() * 8));
            document.body.appendChild(penguin);
        }
    })


    $(".yeti").mousedown(function() {
        alert("Yaaaarrrr!");
        yetiClicked();
    });

});

如果我在没有JQuery的情况下运行它可能会更容易

Answer 1

https://jsfiddle.net/sudarpochong/f1n0190a/1/

您应该实际处理下拉列表更改事件和/或使用另一个按钮来创建这些企鹅。

第1步

在准备好文件时，创建下拉企鹅。您的代码已经为此工作了。

    // dropdown 2-64 possible elements
      for (var i = 2; i < maxPenguin; i++) {
        $("#penguinsSelected").append('<option value="' + i + '">' + i + '</option>');
      }

第2步

处理下拉列表更改事件或按钮点击事件

$("#create-penguin").on("click", function()

OR

$("#penguinsSelected").on("change", function() {

希望你能得到这些想法。

$("#create-penguin").on("click", function() {

  $(".penguin-list").empty();

  // create penguin
  var numberSelected = $("#penguinsSelected").val();
  for(var i = 0; i < numberSelected; i++) {
    var penguinNo = Math.ceil(Math.random() * 8);
    var penguin = $("<div>").addClass("penguin" + penguinNo).html("penguin" + penguinNo);
    $(".penguin-list").append(penguin);
  }

});

修改

https://jsfiddle.net/sudarpochong/q4zqa6cd/2/

如果yeti div位于#gameholder内，您可以使用此事件处理程序为动态创建的yeti

添加处理程序

$("#gameholder").on("mousedown", ".yeti", function() {
    alert("AAAAAAAAAAAAAAA");
});

Answer 2

纯粹的js方法如你所愿。我希望它是自我解释的。

let imgSources = ["https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/SGI-2016-South_Georgia_%28Fortuna_Bay%29%E2%80%93King_penguin_%28Aptenodytes_patagonicus%29_04.jpg/1200px-SGI-2016-South_Georgia_%28Fortuna_Bay%29%E2%80%93King_penguin_%28Aptenodytes_patagonicus%29_04.jpg","https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/South_Shetland-2016-Deception_Island%E2%80%93Chinstrap_penguin_%28Pygoscelis_antarctica%29_04.jpg/1200px-South_Shetland-2016-Deception_Island%E2%80%93Chinstrap_penguin_%28Pygoscelis_antarctica%29_04.jpg","https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Aptenodytes_forsteri_-Snow_Hill_Island%2C_Antarctica_-adults_and_juvenile-8.jpg/220px-Aptenodytes_forsteri_-Snow_Hill_Island%2C_Antarctica_-adults_and_juvenile-8.jpg"];

document.getElementById("dropdown").onchange = displayImages;

function displayImages() {
let nodes = document.getElementById("dispImage");
  removeAllChilds(nodes)
  let pengvalue = document.getElementById("dropdown").value;
  if(pengvalue != "choose") {  
     for(i=0;i<pengvalue;i++) {
       var img = new Image();      
        img.className = 'center';
        img.width = 300;
        img.height = 300;
        img.src = imgSources[Math.floor(Math.random()*imgSources.length)];
        document.getElementById("dispImage").appendChild(img);
  
     }
  }
}

function removeAllChilds(node) {
  while (node.hasChildNodes()) {
    node.removeChild(node.lastChild);
  }
}

<select id="dropdown">
<option value="choose">Choose an option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="dispImage">

</div>

根据下拉选择重复显示html div类元素

2 个答案:

第1步

第2步

修改