Question

我对toggleClass（）;

有一个有趣的问题

我有5个输入图像元素，我想用toggleClass做切换图像（输入src），但我不明白为什么toggleClass没有做我想做的事情？

$(".form-elements input[type='button']").on("click", function() {
 
  var el = $(this).attr("class");
	if(el=="d1"){
  	$(".d1").toggleClass('d1 d1_pasif');
		
}else if(el=="d2"){
		
 $(".d2").toggleClass('d2 d2_pasif');
 
}else if(el=="d3"){
			
  $(".d3").toggleClass('d3 d3_pasif');

}else if(el=="d4"){
		
  $(".d4").toggleClass('d4 d4_pasif');	
 
	}	else if(el=="d5"){
			
  $(".d5").toggleClass('d5 d5_pasif');
  
	}
  return false; 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-elements">
  <input type="image" name="d5" class="d5" src="http://anitur.streamprovider.net/images/otel-filtre/d5.png" />
  <input type="image" name="d4" class="d4" src="http://anitur.streamprovider.net/images/otel-filtre/d4.png" />
  <input type="image" name="d3" class="d3" src="http://anitur.streamprovider.net/images/otel-filtre/d3.png" />
  <input type="image" name="d2" class="d2" src="http://anitur.streamprovider.net/images/otel-filtre/d2.png" />
  <input type="image" name="d1" class="d1" src="http://anitur.streamprovider.net/images/otel-filtre/d1.png" />
</div>

我有a和b图片，当我点击图像时，它必须是b图像，当我点击b图像时，它必须是图像。

感谢。

Answer 1

您可以执行以下操作：

＆＃13;

$(".form-elements input[type='image']").on("click", function() {
  var currSrc = $(this).attr("src");
  // check if the source ends with "_pasif.png"
  if (/_pasif.png$/.test(currSrc)) {
    // if it does, just replace it with ".png"
    $(this).attr("src", currSrc.replace(/_pasif.png$/, ".png"));
  } else {
    // if it does not, replace ".png" with "_pasif.png"
    $(this).attr("src", currSrc.replace(/.png$/, "_pasif.png"));
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-elements">
  <input type="image" name="d5" class="d5" src="http://anitur.streamprovider.net/images/otel-filtre/d5.png" />
  <input type="image" name="d4" class="d4" src="http://anitur.streamprovider.net/images/otel-filtre/d4.png" />
  <input type="image" name="d3" class="d3" src="http://anitur.streamprovider.net/images/otel-filtre/d3.png" />
  <input type="image" name="d2" class="d2" src="http://anitur.streamprovider.net/images/otel-filtre/d2.png" />
  <input type="image" name="d1" class="d1" src="http://anitur.streamprovider.net/images/otel-filtre/d1.png" />
</div>

＆＃13;

基本上，您测试当前src是否以_pasif.png结尾，如果是，则将src设置为src，而不是_pasif部分。如果它没有添加它。然后每次点击都会从一个切换到另一个。如果所有按钮都遵循相同的命名约定，您甚至不必担心实际处理的是哪个按钮，因为您所做的只是替换部分src（所以我不会＆＃39关心d1，d2或d3 ...）

Answer 2

请找到类似于您正在寻找的解决方案的JSfiddle，只需玩一下即可。

如果您想要使用CSS设置按钮样式，请将其设为=＆＃34;提交＆＃34;按钮而不是类型=＆＃34;图像＆＃34;。类型=＆＃34;图像＆＃34;期待一个SRC，你无法在CSS中设置。

代码段如下：

＆＃13;

$(".form-elements input[type='button']").on("click", function() {
  debugger;
  var el = $(this).attr("class");
  //if(el=="d1"){
  $(this).toggleClass('d1 d1_pasif');
  //}

  return false;
});

＆＃13;

.d1 {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d1_pasif.png);
  border: 0;
  display: inline;
  height: 32px;
  width: 32px;
}
.d1_pasif {
  background: url(https://anitur.streamprovider.net/images/otel-filtre/d1.png);
  border: 0;
  display: inline;
  height: 32px;
  width: 32px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-elements">
  <input type="image" name="d5" class="d5" src="https://anitur.streamprovider.net/images/otel-filtre/d5.png" />
  <input type="image" name="d4" class="d4" src="https://anitur.streamprovider.net/images/otel-filtre/d4.png" />
  <input type="image" name="d3" class="d3" src="https://anitur.streamprovider.net/images/otel-filtre/d3.png" />
  <input type="image" name="d2" class="d2" src="https://anitur.streamprovider.net/images/otel-filtre/d2.png" />
  <input type="button" name="d1" class="d1" />

</div>

＆＃13;

toggleClass如何工作？

2 个答案: