如何在HTML中切换基于单选按钮选择的jQuery类

How to switch jQuery class in HTML based on Radio Button choice

本文关键字：单选按钮 选择 jQuery HTML      更新时间：2023-09-26

我有一个jQuery类，当它被应用到图像上时，它会操纵图像，像这样:

<div>
  <img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="myJQclass1" />
</div>

这工作完美的自己，但我也有2个其他的jQuery类:myJQclass2和myJQclass3，这些操作图像不同于myJQclass1。

我想做的是创建3个单选按钮，用户将能够根据他们选择的单选按钮切换使用的类(这将改变图像的外观)。

这是我到目前为止的代码:

<script>
function check(effect) {
    document.getElementById("answerswer").value=effect;
}
</script>
<form>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass1">Change Colour<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass2">Change Brightness<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass3">Change Contrast<br>
 <br>
 <div>
  <img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="answerswer" />
 </div>
</form>

这不起作用，我想我犯了一个基本的错误，但我不确定它是什么。我以前从来没有使用过单选按钮或jQuery，所以我非常感谢任何帮助。

提前感谢!

使用jQuery removeClass()/addClass()。使用removeClass()的重载，它允许您删除多个类。然后添加传递到函数中的类

function check(effect) {
    $('.answer').removeClass('myJQclass1 myJQclass2 myJQclass3');
    $('.answer').addClass(effect);
}
.myJQclass1{
  color:yellow;
  }
.myJQclass2{
  color:green;
  }
.myJQclass3{
  color:blue;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
</script>
<form>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass1">Change Colour<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass2">Change Brightness<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass3">Change Contrast<br>
 <br>
 <div>
  <img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="answerswer" />
 </div>
</form>

你可以更简化一些:

$('input:radio').click(function() {
  var index = $(this).index('input:radio') + 1;
  $('.answer').attr('class', 'answer myJQclass' + index);
});
.myJQclass1 {
  color: red;
}
.myJQclass2 {
  color: blue;
}
.myJQclass3 {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="radio" name="effect" />Change Colour
  <br/>
  <input type="radio" name="effect" />Change Brightness
  <br/>
  <input type="radio" name="effect" />Change Contrast
  <br/>
  <br/>
  <div>
    <img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="answerswer" />
  </div>
</form>

相关文章：