如何为span元素添加/删除类onclick

How do I add/remove class onclick for span elements

本文关键字：删除 onclick 添加 元素 span      更新时间：2023-09-26

我正在创建一个简单的测验网站。我有一个页面，里面有很多不同的问题选项，用户可以选择。

他们点击一个问题，答案列表就会向下滑动到视图中。当他们点击他们选择的答案，即<span>元素时，我希望该跨度有一个类"正确"。如果他们在点击时决定选择另一个答案，我希望将该类从他们的第一个选择中删除，并添加到当前选择中，这样在任何时候只有一个span元素的类"正确"。

我在onclick上添加/删除类时遇到了问题。我在下面展示了我的代码片段。我从W3C和SO（它们在Fiddles上工作）那里得到了一些答案，但当我测试它时，代码在我的网站上不起作用……我正在使用Notepad++创建和测试这个网站。下面是我的代码示例。。。。任何帮助都将不胜感激。

$("carQuestion span").click(function() {
  $('span.correct').not(this).removeClass('correct');
  $(this).addClass('correct');
});
.correct {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="carQuestion">
  What Car is most like me?
  <span class="correct">Ferrari</span>
  <span>Limousine</span>
  <span>SUV</span>
  <span>Stationwagon</span>
</p>

看看这个完全没有jQuery的答案：；）

label {display:block;cursor:pointer;}
label span {display:inline-block;padding:0.1em 0.5em;}
input[type=radio]:checked + span {background-color:#efe;}
input[type=radio] {display:none;}
<p>
    What Car is most like me?
    <label><input type="radio" name="carQuestion" checked="checked" /><span>Ferrari</span></label>
    <label><input type="radio" name="carQuestion" /><span>Limousine</span></label>
    <label><input type="radio" name="carQuestion" /><span>SUV</span></label>
    <label><input type="radio" name="carQuestion" /><span>Stationwagon</span></label>
</p>

感谢大家的帮助。我尝试了上面的一些选项，但由于某种原因，它们对我的布局不起作用。然后尤里卡！我找到了一种对我自己有效的方法。如果其他人在Notepaad++上也有同样的问题，请参阅下面我的功能，它可以完美地工作。

<script>
    $(document).ready(function(){
        $("p span").click(function(){
            $("p, span").removeClass("correct");
            $(this).addClass("correct");
        });
    }); 
</script>

再次感谢大家的帮助。

您缺少#。

$("#carQuestion span").click(function() {
  $('span.correct').not(this).removeClass('correct');
  $(this).addClass('correct');
});

我为您做了一个jsFiddle，请参阅此处https://jsfiddle.net/xox7kvko/1/

当您想要选择ID 时，不要忘记使用#

$("#carQuestion span").click(function(){
    $("#carQuestion span").removeClass('correct');
        $(this).addClass('correct');
    });
相关文章：