$(this).toggleClass 不工作

Question

所以我正忙着创建一个迷你网上商店，我正在使用 google 的前端 (MDL) 模板

我想在我的网店中做的是，当用户点击 x 产品时，我想切换 class、

我在循环内使用闭包来检测对任何产品的点击。

我唯一的问题是，class 不会切换。我尝试使用确实有效的 addClass，但它并不方便，因为我真的想切换 class（从选定产品到未选定）

查看我的代码片段，您就会明白，您会发现我确实正确检测到了点击。但是切换 classes 不起作用。

$(document).ready(function() {
 console.log("Document ready");
  for (var i = 1; i < $(".products").length; i++) {
  (function(index){
  $(".products").click(
   function(e){
   console.log("click successfull!");
         console.log(this);
          $(this).css("border", "1px solid #1976D2");
          
          $(this).toggleClass("mdl-shadow--16dp");
      });
  })(i);
 }

 $("#Card").keyup(function(event){
         if(event.keyCode == 84){
         console.log("Class toggled!");
         $(".products").toggleClass("mdl-shadow--2dp mdl-shadow--16dp");
         }
     });
  
  });

.mdl-card__actions{
  display: flex;
  box-sizing:border-box; 
  align-items: center;
}
.page-content .mdl-card {
 display: inline-block;
 margin: 5px 5px 5px 5px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
   <div class="page-content">
       <!-- Your content goes here -->
       <div class="mdl-card mdl-shadow--2dp products">
        <div class="mdl-card__title">
         <h2 class="mdl-card__title-text">Dell XP13 </h2>
        </div>
        <img src="https://goo.gl/gDDH0i" alt="dell xp13">
        <div class="mdl-card__supporting-text"><b>Basisprijs: 1.649,00$<b></div>
        <div class="mdl-card__actions mdl-card--border">
         <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
          Add to cart
         </a>
         <div class="mdl-layout-spacer"></div>
         <i class="material-icons">add_shopping_cart</i>
        </div>
       </div>  
       <div class="mdl-card mdl-shadow--2dp products">
       <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Chromebook pixel2</h2>
       </div>
       <img src="https://goo.gl/pNie9C.png" alt="chrombook">
       <div class="mdl-card__supporting-text"><b>Basisprijs: 999,99$<b></div>
       <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
         Add to cart
        </a>
        <div class="mdl-layout-spacer"></div>
         <i class="material-icons">add_shopping_cart</i>
       </div>
      </div>
      <div class="mdl-card mdl-shadow--2dp products">
       <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Macbook 13'</h2>
       </div>
       <img src="https://goo.gl/qzq0Cr" alt="Macbook">
       <div class="mdl-card__supporting-text"><b>Basisprijs: 1.129,00$<b></div>
       <div class="mdl-card__actioder">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
         Add to cart
        </a>
        <div class="mdl-layout-spacer"></div>
         <i class="material-icons">add_shopping_cart</i>
       </div>
      </div>
     </div>
  </body>

我将在单独的 link 中向您展示我正在切换的效果，在此 link 我正在切换所有 "divs" 的效果，但我不会每次点击。

Answer 1

我不确定您在这里需要什么循环，但在我看来，这可能是它无法正常工作的原因。我已经设置了一个没有循环的代码片段，所以现在 toggleClass() 运行良好，我还添加了一个 .border class 到 css，这样更容易处理这个。此外，我将两者 toggleClass() 合并在一行中，但这只是一种视觉效果。

查看代码段

$(document).ready(function() {
  console.log("Document ready");
  $(".products").click(function() {
    console.log("click successfull!");
    console.log(this);
    $(this).toggleClass("border").toggleClass("mdl-shadow--16dp");

  });

  $("#Card").keyup(function(event) {
    if (event.keyCode == 84) {
      console.log("class toggled!");
      $(".products").toggleClass("mdl-shadow--2dp mdl-shadow--16dp");
    }
  });
});

.mdl-card__actions {
  display: flex;
  box-sizing: border-box;
  align-items: center;
}
.page-content .mdl-card {
  display: inline-block;
  margin: 5px 5px 5px 5px;
}
.border {
  border: 1px solid #1976D2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="page-content">
    <!-- Your content goes here -->
    <div class="mdl-card mdl-shadow--2dp products">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Dell XP13 </h2>
      </div>
      <img src="https://goo.gl/gDDH0i" alt="dell xp13">
      <div class="mdl-card__supporting-text"><b>Basisprijs: 1.649,00$<b></div>
        <div class="mdl-card__actions mdl-card--border">
         <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
          Add to cart
         </a>
         <div class="mdl-layout-spacer"></div>
         <i class="material-icons">add_shopping_cart</i>
        </div>
       </div>  
       <div class="mdl-card mdl-shadow--2dp products">
       <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Chromebook pixel2</h2>
       </div>
       <img src="https://goo.gl/pNie9C.png" alt="chrombook">
       <div class="mdl-card__supporting-text"><b>Basisprijs: 999,99$<b></div>
       <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
         Add to cart
        </a>
        <div class="mdl-layout-spacer"></div>
         <i class="material-icons">add_shopping_cart</i>
       </div>
      </div>
      <div class="mdl-card mdl-shadow--2dp products">
       <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Macbook 13'</h2>
       </div>
       <img src="https://goo.gl/qzq0Cr" alt="Macbook">
       <div class="mdl-card__supporting-text"><b>Basisprijs: 1.129,00$<b></div>
       <div class="mdl-card__actioder">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
         Add to cart
        </a>
        <div class="mdl-layout-spacer"></div>
         <i class="material-icons">add_shopping_cart</i>
       </div>
      </div>
     </div>
  </body>

Answer 2

问题只出在你的循环中。如果您使用 class 选择器并绑定事件，那么为什么要循环它。所以不用

for (var i = 1; i < $(".products").length; i++) {
    (function(index){
    $(".products").click(
        function(e){
        console.log("click successfull!");
        console.log(this);
         $(this).css("border", "1px solid #1976D2");

         $(this).toggleClass("mdl-shadow--16dp");
        });
    })(i);
}

使用下面的代码

$(".products").click(
    function(e){
    console.log("click successfull!");
    console.log(this);
    $(this).css("border", "1px solid #1976D2");
    $(this).toggleClass("mdl-shadow--16dp");
});

请告诉我您将遇到的任何问题。

$(this).toggleClass 不工作

$(this).toggleClass not working

javascript

jquery

material-design-lite