Как показать разные изображения на основе переменной? - PullRequest
Новая
       18

Как показать разные изображения на основе переменной?

0 голосов
/ 12 июня 2019

Я работаю над оценкой школы, где моя цель - иметь возможность выбрать изображение и показать его на сетке, в зависимости от того, по какой ячейке сетки щелкнули.

Я в основном пытался исправитьМоя проблема с различными вариациями тега getElementsByClassName для изменения источника изображения, отображаемого в ячейке.В настоящее время у меня есть массив источника каждого отдельного изображения, и меняю его, используя функцию.Хранение изображений в 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];  
}

Моя главная проблема в том, что мои изображения просто не будут отображаться.Нет сообщений об ошибках в консоли просто ничего.

1 Ответ

0 голосов
/ 12 июня 2019

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.

...