禁用点击事件，直到点击前一个元素

-2

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

我想用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>

来源

2017-07-11 Muhammed Ikram

什么是'event.target.id'和哪里'事件'来自？ –

我为每个元素提供了唯一的ID。 'alert（event.target.id）;'显示单击元素的ID。 –

而不是禁用点击事件，您可以在click事件中添加一个检查，以便只有当点击的元素是第一个可见图像时才会执行代码。 – vi5ion

您可以定义一个变量作为指标来跟踪被点击了什么样的形象。

使用此索引，您可以通过调用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>

来源

2017-07-11 08:52:24

而不是禁用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>

来源

2017-07-11 09:13:20 vi5ion

在这里，我增加了一个名为 “黄色标志” 类首个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() { 
 

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

我的第一个答案。 :)

来源

2017-07-11 11:31:21 disha

禁用点击事件，直到点击前一个元素

回答

相关问题