Question

我是JavaScript新手所以请原谅我这个问题。

我想让我的img标记响应，所以我使用它：

<img data-nsrc="<?php 
                 echo wp_get_attachment_image_src( get_post_thumbnail_id()
                                                 , 'small-post'
                                                 , false )[0] ?>"
     data-msrc="<?php 
                 echo wp_get_attachment_image_src( get_post_thumbnail_id()
                                                 , 'mobile-img', false )[0] ?>"
     src="<?php echo wp_get_attachment_image_src( get_post_thumbnail_id()
                                                , 'small-post'
                                                , false )[0] ?>" 
     class="img-right resimgsm">

我将代码更改为使用img，因为我使用div inline CSS和background image。

这是script在页面底部运行：

<script>
jQuery(document).ready(function(){
    jQuery( window ).resize(function(ev) {
      var w=jQuery( window ).width();
      if(w>600){
        jQuery.each(jQuery('.resimgsm'),function(i,el){
            jQuery(el).attr('src',"background-image: url('"+jQuery(el).attr('data-nsrc')+"')")
        })
      }else{
        jQuery.each(jQuery('.resimgsm'),function(i,el){
            jQuery(el).attr('src',"background-image: url('"+jQuery(el).attr('data-msrc')+"')")
        })
      }
    });
    jQuery(window).trigger('resize')
})  
</script>

有人可以告诉我如何改变这个吗？谢谢你的帮助。

Answer 1

更改图像源非常类似于您之前的图像源，您只需要直接图像URL：

dependencies {
    compile project(':CoreModule')
    compile project(':SharedLibrary')
 }

简短说明

您之前的样子可能是：

  if(w>600){
    jQuery.each(jQuery('.resimgsm'),function(i,el){
        jQuery(el).attr('src',jQuery(el).attr('data-nsrc'))
    })
  }else{
    jQuery.each(jQuery('.resimgsm'),function(i,el){
        jQuery(el).attr('src', jQuery(el).attr('data-msrc'))
    })
  }

您正在修改样式属性或CSS属性。

你现在应该看起来像：

<div style="background-image: url(imageURLHere.jpg);"></div>

并且上面的代码就是这样。

使用现有代码根据broswer宽度更改图像URL

1 个答案: