Question

我想在每个图片标记后附加图片以显示分享按钮。这是提琴手链接http://jsfiddle.net/q98up2f3/

＆＃13;

$(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" />');
    }
  });
});

＆＃13;

.myclass:hover{
  opacity: 0.7;
}

＆＃13;

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

＆＃13;

动态添加类。同时检查显示类和注入标记的元素但不反映

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>

Answer 2

使用此代码：

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

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

2 个答案: