Отключить событие click до тех пор, пока не будет нажат предыдущий элемент

Question

Отключить событие click до тех пор, пока не будет нажат предыдущий элемент

0

Вы можете определить переменную в качестве индекса для отслеживания того, какое изображение было нажата.

Используя этот индекс, вы можете назначить click target.addEventListener («click», handler), вызывая, handlerгде target - это элемент, который вы хотите прослушать для события клика, и handlerэто код, который вы хотите выполнить.

Когда страница сначала загружает индекс, будет равна нулю, поэтому первое изображение может получить обработчик события. В обработчике источник изображения можно изменить, и обработчик можно удалить с помощью removeEventListener.

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

<table id="ticktable">
  <tr>
    <td>
      <img src="http://www.backgroundsy.com/file/large/yellow-sign.jpg" width="100">
    </td>
    <td>
      <img src="http://www.backgroundsy.com/file/large/yellow-sign.jpg" width="100">
    </td>
    <td>
      <img src="http://www.backgroundsy.com/file/large/yellow-sign.jpg" width="100">
    </td>
    <td>
      <img src="http://www.backgroundsy.com/file/large/yellow-sign.jpg" width="100">
    </td>


  </tr>
</table>
<script>
    var clickIndex = 0;
    var el = document.querySelectorAll("#ticktable img")[0];
    el.addEventListener("click", onclicked);

    function onclicked(e) {
        var elements = document.querySelectorAll("#ticktable img")
        var el = elements[clickIndex++];
        el.setAttribute("src", "https://upload.wikimedia.org/wikipedia/commons/1/15/Tick-red.png");
        el.removeEventListener("click", onclicked);
        if (clickIndex < elements.length)
          elements[clickIndex].addEventListener("click", onclicked);
  };
</script>

0

Вместо отключения события click вы можете добавить проверку внутри события клика, чтобы код выполнялся только в том случае, если элемент с щелчком является первым желтым значком.

var redTickSrc = 'https://upload.wikimedia.org/wikipedia/commons/1/15/Tick-red.png';

$(function() {
  $('.yellow-sign').on('click',function() {
    var $sign = $(this);
    if ($sign.is($('.yellow-sign').first())) {
      $sign
        .attr('src',redTickSrc)
        .removeClass('yellow-sign')
        .addClass('red-tick');
    }
  });
});

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  width: 100px;
  height: 85px;
  vertical-align: middle;
  text-align: center;
}

.yellow-sign {
  width: 100px;
}

.red-tick {
  width: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><img class="yellow-sign" src="http://www.backgroundsy.com/file/large/yellow-sign.jpg"></td>
    <td><img class="yellow-sign" src="http://www.backgroundsy.com/file/large/yellow-sign.jpg"></td>
    <td><img class="yellow-sign" src="http://www.backgroundsy.com/file/large/yellow-sign.jpg"></td>
    <td><img class="yellow-sign" src="http://www.backgroundsy.com/file/large/yellow-sign.jpg"></td>
    <td><img class="yellow-sign" src="http://www.backgroundsy.com/file/large/yellow-sign.jpg"></td>
    <td><img class="yellow-sign" src="http://www.backgroundsy.com/file/large/yellow-sign.jpg"></td>
  </tr>
</table>

0

Здесь я добавил класс с именем «желтый знак» к первому изображению первого td. затем на событие щелчка желтого знака, скрыть текущее изображение и отобразить второе изображение и добавить тот же класс на следующем первом изображении первого td. поэтому он будет работать слева направо.

<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table style="width:100%;" >
 <tr>
<?php 

$count = 1;
for ($x = 1; $x <= 6; $x++) {
    ?>
<td><img src="http://www.backgroundsy.com/file/large/yellow-sign.jpg" width="200" height="170"  id="number-<?php echo $count; ?>"></td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Tick-red.png" width="80" height="60"  id="tick-<?php echo $count; ?>" class="tick-red"></td>


<?php
$count++;
}

?>
  </tr>
  </table>
  <script> 
$( document ).ready(function() {

        $('.tick-red').hide();
        $('tr td:first-child').find("img:first-child").addClass("yellow-sign");
        $(document).on("click", ".yellow-sign", function(e){
                var curElement = $(this);
                var number = curElement.attr('id').replace('number-', '');
                var numberpls1 = +number + 1;
                curElement.hide();
                $("#tick-"+ number).show();
                curElement.parent("td").siblings().find("#number-"+ numberpls1).addClass("yellow-sign");
                
        });
});
</script>
</body>
</html>

Мой первый ответ. :)

JavaScript, JQuery, образ,

javascript,jquery,image,

-2

Ответов: 3