Fügen Sie einen anderen Mediensichtpunkt zu meinem Javascript hinzu

Question

Ich bin neu bei JavaScript und brauche etwas Hilfe. Wenn die Frage falsch formuliert ist, ändern Sie sie bitte, um besser zu meiner Frage zu passen.

Ich habe ein Skript, das die URL basierend auf der Breite des Browsers ändert.

Der Code in meiner Fußzeile sieht wie folgt aus:

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

Was die oben genannten Code tut, ist Last data-nsrc bis 600px, dann data-msrc geladen wird.

Die DIV-Tag sieht wie folgt aus:

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

Meine Frage ist, wie kann ich eine andere Sicht auf die JavaScript-Medien hinzufügen? Ich habe versucht, die Beispielcode unten aufgeführt, aber es hat sich nicht geändert:

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

Und die DIV wie folgt aussieht:

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

Danke für die Hilfe.

Answer 1

Ihre erste if hat nicht }

das Schließen Versuchen:

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

Sie sollten die Bedingungen wie folgt schreiben:

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

Bitte beachte, dass ich fixiert auch die Klammern. Wie auch immer, das sind die Medienanfragen. Warum musst du alle diese js verwenden, um das gleiche zu tun?