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

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 来做同样的事情？

为我的 javascript 添加另一个媒体观点

Add another media viewpoint to my javascript

html

javascript

css

jquery

inline