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>

对于购物篮中的每个物品，它将加载类itemthumbnail。我希望有人单击它时看起来像“已选择”，这就是我使类“适合”的原因。但是我不能让它工作。我现在搜索了几个小时以找到解决方案，但没有任何帮助。

如果我将js click事件放到$('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>

Div的同一个班级，切换课程

1 个答案: