Question

我有一个jQuery类，无论何时应用它都会操纵图像，如下所示：

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

这本身就完美无缺，但是我还有另外两个jQuery类：myJQclass2和myJQclass3，这些类操作的图像与myJQclass1不同。

我要做的是创建3个单选按钮，用户可以根据他们选择的单选按钮切换所使用的类（这将改变图像的外观）。

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

<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

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

＆＃13;

function check(effect) {
    $('.answer').removeClass('myJQclass1 myJQclass2 myJQclass3');
    $('.answer').addClass(effect);
}

＆＃13;

.myJQclass1{
  color:yellow;
  }
.myJQclass2{
  color:green;
  }
.myJQclass3{
  color:blue;
  }

＆＃13;

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

＆＃13;

Answer 2

你可以简化一些事情：

＆＃13;

$('input:radio').click(function() {
  var index = $(this).index('input:radio') + 1;
  $('.answer').attr('class', 'answer myJQclass' + index);
});

＆＃13;

.myJQclass1 {
  color: red;
}
.myJQclass2 {
  color: blue;
}
.myJQclass3 {
  color: green;
}

＆＃13;

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

＆＃13;

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

2 个答案: