jQuery-屏幕宽度小于640像素时的操作

Question

当屏幕宽度小于640时，我正在尝试做两件事。

1. 从thumbnail元素中删除home-thumb类...由于某种原因，该类不起作用。 警报工作正常。 尝试删除课程时我做错什么了吗？

2. 将图像src从src="images/235x/654-1.jpg"更改为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");

     }

 }

现场演示

Answer 2

尝试使用toggleClass()并resize事件resize ：

 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>