如何使用PHP，Javascript / Jquery創建交互式圖像？

Question

我正在嘗試編寫使我向數據庫中單擊的圖像添加選中標記的代碼。 我能夠顯示圖像，但是我無法選擇圖像/無法顯示支票。

的index.php

<?php
  $result = mysql_query("select * from db");
  $count = 0;
  while ($row = mysql_fetch_array($result)) {
    $count++;
    echo '<img src="data:image/jpeg;base64,' . base64_encode($row['img']) . '" width="290" height="290" class = box>';
  }
?>

click.js

$(document.ready(function(){
  $('.box').live("click", function() {
    if($(this).find('.check_image').length == 0){
      $(this).append("<div class='check_image'><img src='check.png' /></div>");
    }else{
      $(this).find('.check_image').remove();
   }
});

Answer 1

好的，所以我建議讓CSS來顯示刻度線。 這意味着將回顯的img選項卡包裝在div中（您不能使用偽選擇器：之后直接在img標簽上使用。我使用了字體庫（font-awesome），這是一種獲取像刻度一樣的圖標的好方法和垃圾桶等插入您的頁面，它們會縮放並可以着色。

正如其他文章中提到的那樣，您在PHP和jQuery中都使用了一些折舊的調用。 玩這個：

 $('.clickable').on('click',function(e){ $(this).toggleClass('clicked'); }) 

 .clickable.clicked:after{ font-family: FontAwesome; content: "\\f00c"; color:lime; position:absolute; top:2px; right:2px; font-size:40px; text-shadow: -2px 3px 2px rgba(150, 150, 150, 0.8); } .clickable{ cursor:pointer; position:relative; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="clickable" style="width:320px;height:240px;"> <img src="http://www.richardhulbert.com/wp-content/uploads/2011/04/New-Forest-11.jpg" alt="nice van bros!" /> </div>