javascript - 将另一个媒体观点添加到我的 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-nsrc直到600px，然后加载data-msrc。

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