當一組單元格的數量等於另一組單元格的數量時顯示彈出消息

我正在查找一個腳本，當黃色單元格的數量等於紅色單元格的數量時，會顯示一個彈出消息。我在下面包含了一張關於這個概念的圖片。任何幫助表示讚賞。當一組單元格的數量等於另一組單元格的數量時顯示彈出消息

2016-08-08 Tariq Sherriff

jQuery的會被罰款？ –

是的j查詢很好。請幫忙。 –

希望你的個人彩色塊的類red_block和yellow_block

setInterval(function(){ 
var reds = document.getElementByClassName('red_block') 
var yellows = document.getElementByClassName('yellow_block') 
if(reds.length == yellows.length){ 
    alert("what ever") 
} 
}, 1);

document.getElementByClassName將返回具有類

給予一個時間間隔，以1ms的檢查值元素的數組每時每刻

來源

2016-08-08 12:43:05

我會把這樣的1ms：setInterval（function（1ms）。我應該在哪裏放置代碼？謝謝你幫助我。 –

@TariqSherriff不，你已經設置了1ms 。setInterval的語法是'setInterval（function（）{}，interval）'interval只是一個整數，不要放'ms'或's'等等。你的函數應該放在'if'語句中。用你定義的類改變if語句（你可以根據你的代碼改變red_block和yellow_block） –

你介意在jriddle上提供一個例子我將把代碼放在我現在有 –

我已包括下面的例子。

$(document).ready(function() { 
 

 
    var color = "White"; 
 
    $("#btnWhite").click(function() { 
 
     color = "#FFFFFF" 
 
    }); 
 
    $("#btnYellow").click(function() { 
 
     color = "#FFFF00" 
 
    }); 
 
    $("#btnRed").click(function() { 
 
     color = "#FF0000" 
 
    }); 
 
    $("#btnBlue").click(function() { 
 
     color = "#0070C0" 
 
    }); 
 
    $("#btnGreen").click(function() { 
 
     color = "#00FF00" 
 
    }); 
 

 
    $("table tr td").click(function() { 
 
     $(this).css("background-color", color); 
 
    }); 
 

 
});

 body { 
 
      padding: 5px; 
 
     } 
 

 
     label { 
 
      font-weight: bold; 
 
     } 
 

 
     input[type=button] { 
 
      padding: 10px 16px; 
 
      text-align: center; 
 
      text-decoration: none; 
 
      display: inline-block; 
 
      font-size: 16px; 
 
     } 
 

 
     p { 
 
      margin: 1em 0 0; 
 
     } 
 

 
     td.pz { 
 
      border: thin solid #000000; 
 
      width: 59px; 
 
      height: 57px; 
 
      background-color: #FFFFFF; 
 
     } 
 

 
     .red_block { 
 
      border: thin solid #000000; 
 
      width: 59px; 
 
      height: 57px; 
 
      background-color: #FF0000; 
 
     } 
 

 
     .yellow_block { 
 
      border: thin solid #000000; 
 
      width: 59px; 
 
      height: 57px; 
 
      background-color: #FFFF00; 
 
     } 
 

 
     td.padding { 
 
      width: 59px; 
 
      height: 57px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <br> 
 
    <br> 
 
    <input id="btnWhite" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #FFFFFF; border: 1px dotted #999" 
 
     value=""> 
 
    <input id="btnYellow" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #FFFF00; border: 1px dotted #999" 
 
     value=""> 
 
    <input id="btnRed" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #FF0000; border: 1px dotted #999" 
 
     value=""> 
 
    <input id="btnBlue" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #0070C0; border: 1px dotted #999" 
 
     value=""> 
 
    <input id="btnGreen" type='button' style="font-face: 'Arial'; width: 50px; font-size: larger; color: Black; background-color: #00FF00; border: 1px dotted #999" 
 
     value=""> 
 
    <br> 
 
    <br> 
 
    <table> 
 
     <tr> 
 
      <td class="yellow_block"></td> 
 
      <td class="yellow_block"></td> 
 
      <td class="yellow_block"></td> 
 
      <td class="red_block"></td> 
 
      <td class="red_block"></td> 
 
      <td class="red_block"></td> 
 
     </tr> 
 
     <tr> 
 
      <td class="yellow_block"></td> 
 
      <td class="yellow_block"></td> 
 
      <td class="yellow_block"></td> 
 
      <td class="red_block"></td> 
 
      <td class="red_block"></td> 
 
      <td class="red_block"></td> 
 
     </tr> 
 
     <tr> 
 
      <td class="yellow_block"></td> 
 
      <td class="yellow_block"></td> 
 
      <td class="yellow_block"></td> 
 
      <td class="red_block"></td> 
 
      <td class="red_block"></td> 
 
      <td class="red_block"></td> 
 
     </tr> 
 
     <tr> 
 
      <td class="yellow_block"></td> 
 
      <td class="yellow_block"></td> 
 
      <td class="yellow_block"></td> 
 
      <td class="red_block"></td> 
 
      <td class="red_block"></td> 
 
      <td class="red_block"></td> 
 
     </tr> 
 
     <tr> 
 
      <td class="yellow_block"></td> 
 
      <td class="yellow_block"></td> 
 
      <td class="yellow_block"></td> 
 
      <td class="red_block"></td> 
 
      <td class="red_block"></td> 
 
      <td class="red_block"></td> 
 
     </tr> 
 
    </table> 
 
</body>

來源

2016-08-08 13:56:57

嗨Syam ...我是對於編寫腳本來說相當新穎，而且我無法使這段代碼正常工作，請告訴我在哪裏插入函數併爲我進行測試，包括上面的代碼，非常感謝您的支持。 –

當一組單元格的數量等於另一組單元格的數量時顯示彈出消息

回答

相關問題