Javascript 一个有效的切换类函数？

现在，我有一个包含多个问题项的html，我只需要创建一个函数（在本例中是，

itemChoose

）来在单击时调用所有问题项。现在出现的问题是，当我在任何项目上单击一个自定义单选按钮时，选中的单选按钮只是从一个问题项目跳到下一个问题项目，因此它会保留所有其他项目问题的答案。我需要一个函数，将切换限制为一个问题项，这样每个问题项都有一个答案

这是一个项目的格式：

    <div id="marksymbol1" style="float:left; margin-right:20px; margin-top:20px;"></div>
    <div  style="margin-left:70px;">
    <p>1. Which of the following sentences describes the turtle in the story?</p>
    <div id="item1A" class="marginTop item">
        <div class="unselected"></div>
        <div class="choicesTxt">
            She loves to fly in the sky.
        </div>
    </div>
    <div id="item1B" class="marginTop item">
        <div class="unselected"></div>
        <div class="choicesTxt">
            She loves to talk and chatter.
        </div>
    </div>
    <div id="item1C" class="marginTop item">
        <div class="unselected"></div>
        <div class="choicesTxt">
            She loves the dry lake and the hot sun.
        </div>
    </div>
    </div>

您可以使用而不是id选择器来绑定

单击
事件，因为您有类可用于id为item1A、item1B、item1C等元素

你可以简单地写

$("[id^='item'] div:nth-child(1)").on('click', itemChoose);


[id^='item']
是一个属性选择器，它匹配其
id
以
item
开头的所有元素。您可以向复选框div添加一个公共类，并按如下方式编写

<div id="item1B" class="marginTop item">
    <div class="unselected commonClass"></div>
    <div class="choicesTxt">
        She loves to talk and chatter.
    </div>
</div>
<div id="item1C" class="marginTop item">
    <div class="unselected commonClass"></div>
    <div class="choicesTxt">
        She loves the dry lake and the hot sun.
    </div>
</div>


$('.commonClass').toggleClass('selected');


她喜欢聊天。
她喜欢干涸的湖水和炎热的太阳。
$（'.commonClass'）。toggleClass（'selected'）；

这将切换选定的类。当未添加选定类时，可以将div样式设置为未选中

这节省了大量JS代码：）
您可以像下面这样做：

$('.item').click(function() {
    $(this).find('div:nth-child(1)').toggleClass('selected').toggleClass('unselected');
});

为自定义单选按钮指定一个类，即“检查”，然后为每个单选按钮设置一个onclick事件侦听器，用于打开或关闭所选类。
突出显示的样式可以在css中的.check.selected下，未选中的样式可以应用于.check

$('.check').each(function() { 
    $(this).on('click',function() {
        $(this).toggleClass('selected')
    })
});

$('.item').click(function() {
    $(this).find('div:nth-child(1)').toggleClass('selected').toggleClass('unselected');
});

$('.check').each(function() { 
    $(this).on('click',function() {
        $(this).toggleClass('selected')
    })
});