Question

当用户在一个或多个图像上单击一次时，我正在尝试创建。它应该在点击的图像上方显示右图。如果用户再次单击所选图像，则应从单击图像中删除右图像

点击我的jquery点击事件正在运行，但它没有在图像上方显示正确的符号。

我的代码是

<div id="url-i-pr" style="margin: 10px;">

 <span class="url-img">
<img src="http://media.santabanta.com/images/picsms/2014/sms-8957.jpg" width="100px" height="100px" style="margin: 2px; position:relative;"></span>
<span class="url-img">
<img src="http://media.santabanta.com/images/picsms/2014/sms-8958.jpg" width="100px" height="100px" style="margin: 2px; position:relative;"></span>

 <span class="url-img">
 <img src="http://media.santabanta.com/images/picsms/2014/sms-8950.jpg" width="100px" height="100px" style="margin: 2px; position:relative;"></span>

<span class="url-img">
 <img src="http://media.santabanta.com/images/picsms/2014/sms-8951.jpg" width="100px" height="100px" style="margin: 2px; position:relative;"></span></div>

jquery的

 $(document).on('click', '#url-i-pr img', function(f) {
        f.preventDefault();
       $(this).addClass('select_img');
       alert('hi');
  });

我尝试了my code

Answer 1

它按预期工作。您的问题是，当您前面有图像时，您正试图显示背景图像，因此它永远不会显示。如果您将css从color: green;更改为border: 1px solid green，您就会看到它正在运作。

如果您想在点击时进行切换，请将addClass更改为toggleClass。

eD：css有很多问题，这个小提琴可以让你找出你需要的东西。 http://jsfiddle.net/o4ok63dt/3/

Answer 2

来自@evu的答案可以解决这个问题 - 我正在添加这个，因为它将样式重构为类并为叠加层提供了另一种设计：

的jsfiddle：

http://jsfiddle.net/raad/r0hz1f46/3/

CSS + HTML：

<style>
  #url-i-pr {
      margin: 10px;
  }

  .img-container {
      position: relative;
      display: inline-block;
      margin: 2px;
      border: 2px solid transparent;
      width: 100px;
      height: 100px;
  }

  #url-i-pr img {
      width: 100px;
      height: 100px;
  }

  .select_img {
      border: 2px solid black !important;
  }

  .select_img:after {
      display: block;
      position: absolute;
      width: 25px;
      height: 25px;
      top: 0px;
      left: 0px;
      content: '✔';
      color: white;
      background-color: black;
      font-size: 14px;
      text-align: center;
  }
</style>

<div id="url-i-pr">
  <span class="img-container">
    <img src="http://media.santabanta.com/images/picsms/2014/sms-8957.jpg" />
  </span>
  <span class="img-container">
    <img src="http://media.santabanta.com/images/picsms/2014/sms-8958.jpg" />
  </span>
  <span class="img-container">
    <img src="http://media.santabanta.com/images/picsms/2014/sms-8950.jpg" />
  </span>
  <span class="img-container">
    <img src="http://media.santabanta.com/images/picsms/2014/sms-8951.jpg" />
  </span>
</div>

使用Javascript：

$(document).on('click', '.img-container', function (f) {
    f.preventDefault();
    $(this).toggleClass('select_img');
});

单击时在图像上方插入右图像

2 个答案:

的jsfiddle：

CSS + HTML：

使用Javascript：