Question

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

他们点击一个问题，答案列表向下滑入视图。当他们点击他们选择的<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>

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您错过了#。

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

Answer 3

我为你做了一个jsFiddle，请看这里https://jsfiddle.net/xox7kvko/1/

如果您想要选择ID

，请不要忘记使用＃

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

Answer 4

感谢大家的帮助。我尝试了上面的一些选项，但由于某种原因，他们只是没有在我的布局上工作。然后尤里卡！我发现了一种对我有用的方法。如果其他人在Notepaad ++上遇到同样的问题，请参阅下面我的功能，该功能完美无缺。

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

再次感谢大家的帮助。

如何为span元素

4 个答案: