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中都使用了一些折旧调用。玩一玩：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如何使用PHP，Javascript / Jquery创建交互式图像？

1 个答案: