Question

我真的需要一些JavaScript的帮助。

我创建了一个示例文件。我有一张桌子，里面有一张黄色图像（见上文）。

我想用JavaScript做的是当我点击图像时，会出现红色勾号并且隐藏点击的图像。用户也应按顺序点击图像（从左到右）。

我不希望用户点击任何随机图片。他应该点击第一个，而不是第二个，而不是第三个，依此类推。因此，JavaScript可能会禁用点击事件旁边的所有图像。当用户单击第一张图像时，会出现红色勾号，下一张图像变为可点击。

HTML

<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; ?>"></td>

<script> 
$( document ).ready(function() {

$('#tick-<?php echo $count; ?>').hide();
$('#number-<?php echo $count; ?>').click(function(){
    //ajax request
    //**
    //**
    //**

 alert(event.target.id);
    });
});



</script>

<?php
$count++;
}

?>
  </tr>
  </table>

Answer 1

您可以将变量定义为索引，以跟踪单击的图像。

使用此索引，您可以通过调用target.addEventListener("click", 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>

Answer 2

您可以在click事件中添加一个检查，而不是禁用click事件，这样只有在点击的元素是第一个黄色标记图像时才会执行代码。

＆＃13;

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');
    }
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

在这里，我添加了一个名为＆＃34; yellow-sign＆＃34;到第一个td的第一张图片。然后点击黄色标记的点击事件，隐藏图像并显示第二个图像，并在第一个td的下一个第一个图像上添加相同的类。所以，它将从左到右工作。

＆＃13;

<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>

＆＃13;

我的第一个答案。：）

禁用单击事件，直到单击上一个元素

3 个答案: