使用jQuery

Question

这是一个“晶体收集器”游戏，它创建四个带有随机数的晶体（“ div”），用户单击该晶体以将数字添加到计算机生成的随机数中，以匹配计算机的随机数。一切正常，但我很难将所需的晶体图像添加到4 div中。

var image = "../../assets/images/crystal.jpg"

var crystal = $("<div>");
crystal.attr({
    "class": 'crystal',
    "data-random": randomNum,
    "src": image
});
$(".crystals").append(crystal);

我唯一需要的结果是4张水晶图像显示在为随机数点击而创建的4个div中。

Answer 1

创建div标签，而不是img。

var image = "https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"

var crystal = $("<img>");
crystal.attr({
    "class": 'crystal',
    "data-random": 1,
    "src": image,
    "height": '100px',
    "width": '100px'
});

$(".crystals").append(crystal);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="crystals"></div>

Answer 2

Create the image and add to div

var elem = document.createElement("img");
elem.setAttribute("src", "images/hydrangeas.jpg");
elem.setAttribute("height", "768");
elem.setAttribute("width", "1024");
elem.setAttribute("alt", "Flower");
document.getElementById("placehere").appendChild(elem);