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>