Question

现在，我有一个带有几个问题项的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>

这就是我到目前为止所做的：

function itemChoose () {
    $(this).toggleClass('selected', 'unselected');
    if ($('.item div:nth-child(1)').hasClass('selected')) {
        $('.item div:nth-child(1)').removeClass('selected').addClass('unselected');
    }
}

    $("#item1A div:nth-child(1)").on('click', itemChoose);
    $("#item1B div:nth-child(1)").on('click', itemChoose);
    $("#item1C div:nth-child(1)").on('click', itemChoose);
    $("#item2A div:nth-child(1)").on('click', itemChoose);
    $("#item2B div:nth-child(1)").on('click', itemChoose);
    $("#item2C div:nth-child(1)").on('click', itemChoose);
    $("#item3A div:nth-child(1)").on('click', itemChoose);
    $("#item3B div:nth-child(1)").on('click', itemChoose);
    $("#item3C div:nth-child(1)").on('click', itemChoose);
    $("#item4A div:nth-child(1)").on('click', itemChoose);
    $("#item4B div:nth-child(1)").on('click', itemChoose);
    $("#item4C div:nth-child(1)").on('click', itemChoose);
    $("#item5A div:nth-child(1)").on('click', itemChoose);
    $("#item5B div:nth-child(1)").on('click', itemChoose);
    $("#item5C div:nth-child(1)").on('click', itemChoose);
    $("#item6A div:nth-child(1)").on('click', itemChoose);
    $("#item6B div:nth-child(1)").on('click', itemChoose);
    $("#item6C div:nth-child(1)").on('click', itemChoose);
    $("#item7A div:nth-child(1)").on('click', itemChoose);
    $("#item7B div:nth-child(1)").on('click', itemChoose);
    $("#item7C div:nth-child(1)").on('click', itemChoose);
    $("#item8A div:nth-child(1)").on('click', itemChoose);
    $("#item8B div:nth-child(1)").on('click', itemChoose);
    $("#item8C div:nth-child(1)").on('click', itemChoose);

Answer 1

你可以简单地写

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

[id^='item']是一个属性选择器，匹配id以item开头的所有元素

Answer 2

您可以使用class selector代替ID选择器绑定 click事件，因为您可以使用包含 item1A，item1B，item1C等ID的元素。 ... 的

$(".marginTop.item div:nth-child(1)").on('click', itemChoose);

Answer 3

您可以在复选框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');

这将切换选定的类。

时，如果未选中已选择的类，则可以将div设置为未选中。

这节省了很多JS代码：）

Answer 4

你可以这样做：

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

<强> SEE THE WORKING DEMO>

Answer 5

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

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

一个有效的切换类功能？

5 个答案: