Question

我正在进行学校评估，我的目标是能够选择图像并根据单击的网格单元格在网格上显示该图像。

我主要是尝试通过getElementsByClassName标签上的不同变化来解决我的问题，以更改单元格中显示的图像的来源。目前，我有每个不同Image的源数组，并使用函数对其进行了更改。用html存储图像对我来说不是一种选择，因为我必须将所有23张图像存储9次，但我也没有设法使其在CSS中工作。以前，我将图像保存在 divs 中，但是我认为如果尝试更改背景图像标签会更好，但是这也不起作用。

<div id="crafting-table">
        <div class="craft-grid 1" onclick="gridclick(1)"></div>
        <div class="craft-grid 2" onclick="gridclick(2)"></div>
        <div class="craft-grid 3" onclick="gridclick(3)"></div>
        <div class="craft-grid 4" onclick="gridclick(4)"></div>
        <div class="craft-grid 5" onclick="gridclick(5)"></div>
        <div class="craft-grid 6" onclick="gridclick(6)"></div>
        <div class="craft-grid 7" onclick="gridclick(7)"></div>
        <div class="craft-grid 8" onclick="gridclick(8)"></div>
        <div class="craft-grid 9" onclick="gridclick(9)"></div>
    </div>

function clickitem(itemnum) {
    "use strict";
    selected_item = itemnum;
}
function gridclick(gridpos) {
    "use strict";
    document.getElementsByClassName("grid-img " + gridpos).style.backgroundImage = images[selected_item];  
}

我的主要问题是我的图像无法显示。控制台中没有错误消息，什么也没有。

Answer 1

document.getElementsByClassName仅适用于单个班级。

如果您想参加多个课程，请尝试document.querySelectorAll('.craft-grid,.1')

- 但我建议您改为这样做：

function gridclick(el) {
    el.style.backgroundColor = el.style.backgroundColor == "red" ? "" : "red"; //clicked element style
    console.log(el.getAttribute('data-something')); // data attribute
    console.log([...el.parentElement.children].indexOf(el)); // index of the element relative to the parent
}

.craft-grid{
  cursor:pointer;
}

<div id="crafting-table">
  <div class="craft-grid" data-something="first" onclick="gridclick(this)">1</div>
  <div class="craft-grid" data-something="second" onclick="gridclick(this)">2</div>
</div>

使用该元素作为参考就足够了。如果您希望元素包含一些数据，请使用data属性。

如何基于变量显示不同的图像？

1 个答案: