javascriptに別のメディアの視点を追加する

Question

私はJavaScriptを初めて使用しています。質問の言葉が間違っている場合は、質問に合うように変更してください。

ブラウザの幅に基づいてURLを変更するスクリプトがあります。

私のフッター内のコードは次のようになります。上記のコードは何

<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('style',"background-image: url('"+jQuery(el).attr('data-nsrc')+"')") 
     }) 
     }else{ 
     jQuery.each(jQuery('.resimgsm'),function(i,el){ 
      jQuery(el).attr('style',"background-image: url('"+jQuery(el).attr('data-msrc')+"')") 
     }) 
     } 
    }); 
    jQuery(window).trigger('resize') 
}) 
</script> 

がdata-msrcがロードされ、その後、600PXまで負荷data-nsrcです。

DIVタグは次のようになります。

<div 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] ?>" style="background-image: url('<?php echo wp_get_attachment_image_src(get_post_thumbnail_id(), 'small-post', false)[0] ?>')" class="img-right resimgsm"> 

私の質問は、私はJavaScriptに別のメディアの視点を追加するにはどうすればよいのですか？私は、下記の例のコードを試してみましたが、それは変更されませんでした：

 if (w>768){ 
     jQuery.each(jQuery('.resimgsm'),function(i,el){ 
      jQuery(el).attr('style',"background-image: url('"+jQuery(el).attr('data-lsrc')+"')") 
     }) 
     else if(w>600){ 
     jQuery.each(jQuery('.resimgsm'),function(i,el){ 
      jQuery(el).attr('style',"background-image: url('"+jQuery(el).attr('data-nsrc')+"')") 
     }) 
     }else{ 
     jQuery.each(jQuery('.resimgsm'),function(i,el){ 
      jQuery(el).attr('style',"background-image: url('"+jQuery(el).attr('data-msrc')+"')") 
     }) 
     } 
    }); 

そしてDIVは、次のようになります。

<div data-lsrc="<?php echo wp_get_attachment_image_src(get_post_thumbnail_id(), 'normal', false)[0] ?>" 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] ?>" style="background-image: url('<?php echo wp_get_attachment_image_src(get_post_thumbnail_id(), 'normal', false)[0] ?>')" class="resimgsm"> 

の助けをありがとう。

Answer 1

あなたの最初のifはこれを試してみてください}

を閉じていません。

if (w>768){ 
    jQuery.each(jQuery('.resimgsm'),function(i,el){ 
     jQuery(el).attr('style',"background-image: url('"+jQuery(el).attr('data-lsrc')+"')") 
    }) 
}else if(w>600){ 
    jQuery.each(jQuery('.resimgsm'),function(i,el){ 
     jQuery(el).attr('style',"background-image: url('"+jQuery(el).attr('data-nsrc')+"')") 
    }) 
}else{ 
    jQuery.each(jQuery('.resimgsm'),function(i,el){ 
     jQuery(el).attr('style',"background-image: url('"+jQuery(el).attr('data-msrc')+"')") 
    }) 
} 

Answer 2

あなたはこのような条件を書く必要があります。私もブラケットを固定

if (w>768){ 
    jQuery.each(jQuery('.resimgsm'),function(i,el){ 
     jQuery(el).attr('style',"background-image: url('"+jQuery(el).attr('data-lsrc')+"')") 
    }) 
}else if(w>600 && w<=768){ 
    jQuery.each(jQuery('.resimgsm'),function(i,el){ 
     jQuery(el).attr('style',"background-image: url('"+jQuery(el).attr('data-nsrc')+"')") 
    }) 
}else{ 
    jQuery.each(jQuery('.resimgsm'),function(i,el){ 
     jQuery(el).attr('style',"background-image: url('"+jQuery(el).attr('data-msrc')+"')") 
    }) 
} 

注意を。とにかくこれはメディアクエストのためのものです。なぜあなたは同じことをするためにこのすべてのjsを使用する必要がありますか？