Div有相同的类，切换类

Question

我在试着做一个像购物篮里的物品清单。

​

$(document).ready(function(){
  $('.itemthumbnail').click(function(){
   $(this).toggleClass("fit");
  });
});

#itemlist{
  background-color: #19191d;
  width: 100%;
  height: 300px;
  overflow-y: auto;
  padding: 5px;
}
.itemthumbnail{
  border: 1px solid #33353e;
  display: inline-block;
  width: 99px;
  height: 99px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #262629;
  border-radius: 5px;
  margin-bottom: 4px;
  cursor: pointer;
}
.itemthumbnail:hover {
  background-color: #3b3b40;
  -ms-transform: scale(0.99); /* IE 9 */
  -webkit-transform: scale(0.99); /* Safari 3-8 */
  transform: scale(0.99); 
}
.fit{
  background-color: #131315;
  border:2px solid #278c2e;
  -ms-transform: scale(0.95); /* IE 9 */
  -webkit-transform: scale(0.95); /* Safari 3-8 */
  transform: scale(0.95); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="itemlist">
 <div class="itemthumbnail">
     <div class="itemname">Sweater</div> 
     <div class="itemprice">19.99 $</div>
   </div>
</div>

​

对于篮子中的每一个项目，它将加载类项目缩略图。我希望当有人点击它看起来像“被选中”，这就是我使这个课程“适合”的原因。但我不能让它开始工作。我找了几个小时才找到解决办法，但什么也帮不了我。

如果我将js单击事件放到$('Button').click...中，它就能工作。目前还不知道如何解决这个问题。对每一个暗示都会很高兴。

Answer 1

尝试这段代码

​

jQuery(document).ready(function($){
  jQuery('.itemthumbnail').click(function(){
      jQuery('.itemthumbnail').removeClass("fit");
      jQuery(this).toggleClass("fit");
  });
});

#itemlist{
  background-color: #19191d;
  width: 100%;
  height: 300px;
  overflow-y: auto;
  padding: 5px;
}
.itemthumbnail{
  border: 1px solid #33353e;
  display: inline-block;
  width: 99px;
  height: 99px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #262629;
  border-radius: 5px;
  margin-bottom: 4px;
  cursor: pointer;
}
.itemthumbnail:hover {
  background-color: #3b3b40;
  -ms-transform: scale(0.99); /* IE 9 */
  -webkit-transform: scale(0.99); /* Safari 3-8 */
  transform: scale(0.99); 
}
.fit{
  background-color: #131315;
  border:2px solid #278c2e;
  -ms-transform: scale(0.95); /* IE 9 */
  -webkit-transform: scale(0.95); /* Safari 3-8 */
  transform: scale(0.95); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="itemlist">
 <div class="itemthumbnail">
   <div class="itemname">Sweater</div> 
   <div class="itemprice">19.99 $</div>
 </div>
 <div class="itemthumbnail">
   <div class="itemname">Sweater</div> 
   <div class="itemprice">19.99 $</div>
 </div>
</div>

​