Question

所以我正忙着创建一个迷你网店，我正在使用谷歌的前端（MDL）模板

我想在我的网上商店做的是，当用户点击x产品时，我想要切换课程，

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

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

查看我的代码段＆amp;你会明白，你会发现我确实检测到了点击。但切换课程不起作用。

$(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我正在切换所有“div”的效果但是我不会每次点击。

Answer 1

我不确定你在这里需要一个循环，但在我的观点中，这可能是它无法正常工作的原因。我已经设置了一个没有循环的代码段，所以现在toggleClass()运行良好，我还为css添加了.border类，它更容易处理这个。此外，我将toggleClass()合并为一行，但它只是一个光学内容。

查看代码段

＆＃13;

$(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");
    }
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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不工作

2 个答案: