既存のコードでbroswer幅に基づいて画像URLを変更する

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

を私はinline CSSとbackground imageでdivを使用していた以前のようにimgを使用するようにコードを変更しました。

これは、ページの一番下に実行されている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が必要です。

：

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')) 
    }) 
    } 

---

短い説明を以前におそらくのように見えていた何

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

あなたはスタイル属性またはCSSプロパティを変更していました。

<img src="imageURLHere.jpg"> 

と上記のコードは、その処理を行います。あなたが今持っている何

は次のようになります。