如何根据单选按钮选择在 HTML 中切换 jQuery class

Question

我有一个 jQuery class 可以在应用到图像时操纵图像，如下所示：

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

这本身就可以完美地工作，但是我还有另外 2 个 jQuery classes：myJQclass2 和 myJQclass3，它们对图像的处理方式与 myJQclass1.

我想要做的是创建 3 个单选按钮，用户将能够根据他们 select 的单选按钮切换所使用的 class（这将改变图像的显示方式看起来）。

到目前为止，这是我的代码：

<script>
function check(effect) {
    document.getElementById("answer").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="answer" />
 </div>
</form>

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

提前致谢！

Answer 1

使用jQueryremoveClass()/addClass()。使用 removeClass() 的重载，它允许您删除多个 classes。然后添加传入函数的class

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="answer" />
 </div>
</form>

Answer 2

你可以再简化一点：

$('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="answer" />
  </div>
</form>

如何根据单选按钮选择在 HTML 中切换 jQuery class

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

html

javascript

jquery

radio-button