javascript - 如何在图像标签 jQuery 中显示图像

Question

我想在每个图片标签后附加一张图片以显示分享按钮。这是 fiddler 链接 http://jsfiddle.net/q98up2f3/

$(document).ready(function() {
  $("img").each(function() {
    if($(this).prop('height')>100 && $(this).prop('width')>100) {
      $(this).addClass( "myClass" );
      $(this).wrapInner('<img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/share-128.png" />');
    }
  });
});

.myclass:hover{
  opacity: 0.7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="check">
  <img src='http://media-cdn.tripadvisor.com/media/photo-s/05/e4/f7/89/little-venice.jpg'>
  <img src='http://media-cdn.tripadvisor.com/media/photo-s/05/e4/f7/89/little-venice.jpg'>
  <img src='http://media-cdn.tripadvisor.com/media/photo-s/05/e4/f7/89/little-venice.jpg'>
</div>

动态添加类。在检查显示类和注入(inject)标签但未反射(reflect)的元素时

Answer 1

查看下面的输出

使用 after() 函数在该特定元素之后插入 see Documentation

$(document).ready(function() {
  $("img").each(function() {
    if($(this).prop('height')>100 && $(this).prop('width')>100) {
      $(this).addClass( "myClass" );
      $(this).after('<img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/share-128.png" />');
    }
    $('.myClass').hover(function(){
      $(this).next().show();    
    },function(){
      $(this).next().hide();    
    });
  });
});

.myclass:hover{
  opacity: 0.7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="check">
<img src='http://media-cdn.tripadvisor.com/media/photo-s/05/e4/f7/89/little-venice.jpg'>
<img src='http://media-cdn.tripadvisor.com/media/photo-s/05/e4/f7/89/little-venice.jpg'>
<img src='http://media-cdn.tripadvisor.com/media/photo-s/05/e4/f7/89/little-venice.jpg'>
</div>