可以切換的圖像網格，需要幫助保存選定的圖像

我有一張我可以切換的圖像表。在每個單元格中，我可以在多個圖像之間切換，如果我停止切換5秒鐘，它會以某種方式持續（尚未確定，只是提醒它）。可以切換的圖像網格，需要幫助保存選定的圖像

我遇到麻煩的是，如果我在幾個不同的單元格中點擊一次（假設我在5秒內點擊3個不同的單元格，我只會得到1個保存的警報而不是3個。設計？

該計劃的想法是，用戶可以切換細胞，以示對任務狀態的清單。像勾號的圖像，圖像的問題，等等。

設計其他建議都歡迎。請問對象在這裏工作更好嗎？

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test 123</title> 
    <style type="text/css"> 
     body { 
      background-color: teal; 
     } 
    </style> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script> 
</head> 
<body> 
    <table border="1"> 
     <tr> 
      <td><img class="imgX" src="pic0.png" alt="No Pic" /></td> 
      <td><img class="imgX" src="pic0.png" alt="No Pic" /></td> 
     </tr> 
     <tr> 
      <td><img class="imgX" src="pic0.png" alt="No Pic" /></td> 
      <td><img class="imgX" src="pic0.png" alt="No Pic" /></td> 
     </tr> 
    </table> 

    <script type="text/javascript"> 
     $(function() { 
      var clicks = 0; 
      var timer; 

      $('.imgX').on('click', function() { 
       var fileName = $(this).attr('src'); 
       var re = /(pic)(.*)(.png)/; 
       var imgNumber = fileName.match(re)[2]; //todo: why array 
       clicks = Number(imgNumber) + 1; 

       if (clicks > 3) clicks = 0; 

       var eleImage = $(this).attr('src', 'pic{0}.png'.replace('{0}', clicks)); 

       //Save image if 5 seconds have passed 
       clearTimeout(timer); 
       timer = setTimeout(function() { 
        alert('saved'); 
       }, 5000); 
      }); 
     }); 
    </script> 
</body> 
</html>

來源

2017-02-09 Rod

試試這個

<script type="text/javascript"> 
    $(function() { 


     $('.imgX').on('click', function() { 
      var clicks = 0; 
     var timer; 
      var fileName = $(this).attr('src'); 
      var re = /(pic)(.*)(.png)/; 
      var imgNumber = fileName.match(re)[2]; //todo: why array 
      clicks = Number(imgNumber) + 1; 

      if (clicks > 3) clicks = 0; 

      var eleImage = $(this).attr('src', 'pic{0}.png'.replace('{0}', clicks)); 

      //Save image if 5 seconds have passed 
      clearTimeout(timer); 
      timer = setTimeout(function() { 
       alert('saved'); 
      }, 5000); 
     }); 
    }); 
</script>

其實你正在調用與覆蓋相同的變量（點擊和計時器）的函數。如果您將這些變量放在點擊函數中，那麼它們將作爲每個點擊事件的新建來創建。

來源

2017-02-09 04:12:30 Shubhranshu

如果以這種方式完成，如果您多次單擊相同的單元格，您將獲得許多警報。所以這是行不通的。 – Rod

可以切換的圖像網格，需要幫助保存選定的圖像

回答

相關問題