如何在图像标记jQuery中显示图像

How to show image in image tag jQuery

本文关键字：图像 显示 显示图 jQuery      更新时间：2023-09-26

我想在每个图像标签后附加一个图像以显示共享按钮。这是小提琴手链接 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>

动态添加类。在检查显示类和注入标签但未反映的元素时

请参阅下面的输出

使用 after（） 函数在该特定项目之后插入，请参阅文档

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

使用以下代码：

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

http://jsfiddle.net/q98up2f3/1/

相关文章：