Смена картинки по нажатию

Question

Пишу сайт для тестирования специалистов. Написал скрипт для смены картинки по нажатию, но работает он только для 1 блока. После того как внедрил PHP-код для того, чтобы вывести 60 вопросов, скрипт перестал корректно работать.

Сам скрипт для вывода вопросов:

<div class="content">
<?php
    $mas = array("");
    for ($i=0; $i < 60; $i++) { 
        $rand_id = rand(1, 2286);
        for ($j=0; $j < count($mas); $j++) {
            if ($mas[$i] = $rand_id) {$rand_id = rand(1, 2286);} else {$mas[count($mas) + 1] = $rand_id;}}
        $num = get_num(4);
        $number = $i+1;
        echo'<div class="question"> 
            <div class="left_box"> 
            <span>Вопрос <b>'.$number.'</b></span><br>
                <span>Пока нет ответа</span><br>
                <span>Балл: 1,00</span><br>
                <span><img src="../images/testing/icon/unflagged.png" alt="" id="image" onClick="imgsrc();"> Отметить вопрос</span>
            </div>';
        echo witgdraw_quest($num, get_quest($rand_id));
        echo '</div>';

    }
?>
</div>

Скрипт по смену картинки:

<script>
    var img_num=0;
    var image = document.getElementById("image");
    var imgs = ["../images/testing/icon/unflagged.png","../images/testing/icon/flagged.png"];
    function imgsrc() {img_num++;img_num%=imgs.length;image.src = imgs[img_num];} //Смена флажка
</script>

Прошу помощи!

Answer 1

function imgsrc(img) {
  var imgs = [
    "https://homepages.cae.wisc.edu/~ece533/images/airplane.png",
    "https://homepages.cae.wisc.edu/~ece533/images/baboon.png"
  ];
  var index = ((+img.dataset.imageindex || 0) + 1) % imgs.length;
  img.dataset.imageindex = index;
  img.src = imgs[index];
}

img {
  width: 150px;
  height: 150px;
}

<div><span><img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="" onClick="imgsrc(this)"> Отметить вопрос</span></div>
<div><span><img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="" onClick="imgsrc(this)"> Отметить вопрос</span></div>
<div><span><img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="" onClick="imgsrc(this)"> Отметить вопрос</span></div>

БЛОГ НА HUSL

Смена картинки по нажатию

Ответы (1 шт):