禁用點擊事件，直到點擊前一個元素

-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

禁用點擊事件，直到點擊前一個元素

回答

相關問題