jQuery - Action when screen width is smaller than 640 pixels

Question

I'm trying to do two things when the screen width is smaller than 640.

1. Remove the home-thumb class from the thumbnail element ... which for some reason is not working. The alert works fine. Am I doing something wrong when trying to remove the class?

2. Change the image src from src="images/235x/654-1.jpg" to src="images/335x/654-1.jpg"

HTML

 <div class="thumbnail home-thumb">                 
   <a href="item?id=654">
    <img class="col_2_img column" src="images/235x/654-1.jpg" alt="">   
   </a>
 </div>

JS

 if ($(window).width() < 640) 
 {
    alert("640");
    $("div.thumbnail").removeClass("home-thumb");
 }

Answer 1

if ($(window).width() < 640) 
 {

    $("div.thumbnail").removeClass("home-thumb");
     var src_img=$("div.thumbnail").find("img").attr("src");
     if(src_img=="images/235x/654-1.jpg")
     {
         $("div.thumbnail").find("img").attr("src","images/335x/654-1.jpg");

     }

 }

FIDDLE DEMO

Answer 2

Try using toggleClass() and resize events:

 var onResize = function() { $("div.thumbnail").toggleClass("home-thumb", !(640 > $(window).width())); }; $(window).on('resize load', onResize); 

 .thumbnail { border: 1px solid grey; padding: 5px 7px; background: orange; } .home-thumb { background: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="thumbnail home-thumb">Thumbnail</div>