Question

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

从home-thumb元素中移除thumbnail类...由于某种原因无效。警报工作正常。我在尝试删除课程时是否做错了什么？
将图片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");

     }

 }

<强> FIDDLE DEMO

Answer 2

尝试使用toggleClass()和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>

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

2 个答案: