Question

我正在创建一个包含多项选择和单项选择题的表单。每当用户点击某个选项时，它就会获得类.checked。

单个选项

$(function() {
    $('#device li').click(function() {
        $('#device li.checked').removeclass('checked');
        $(this).addClass('checked');
    });
});

进行多项选择

$(function() {
    $('#targetAudience li').click(function() {
        if ($(this).hasClass('checked')) {
            $(this).removeClass('checked');
        }
        else {
            $(this).addClass('checked');
        }
    });
});

但是，对于每个问题，我必须复制粘贴足够的代码并更改其中的ID。问题是完全没有效率。因此，我想优化代码以获得更通用的全部代码。

DOM结构看起来像这样

<ul id="buildForm"> // Complete form
    <li id="FillInSubjectHere" class="question"> // question container
        <h3></h3> //Question title
        <ul> // Answer array container
            <li class="option"> // checkable answer     
            <li class="option"> // checkable answer     
        </ul>       
    </li>
</ul>

这个目标：此时，我必须为每个问题编写一段代码，否则它们会相互干扰。但是，我想要两个（1个用于多项选择，1个用于单选）（奖励，如果你可以用一个），代码片段指定#buildForm中的所有问题，而不必每个都指定每个问题。这样可以防止在添加新问题时更改Javascript。

代码必须正常运行，因此当用户点击单选项问题选项时，该选项会获得.checked，此问题中的所有其他选项都不会。对于多项选择题，.checked在没有此课程时会被添加。否则，它将被删除。

评论是否需要更多信息。非常感谢！

Answer 1

单个答案：

$(function() {
    $('.question.singleanswer .option').click(function() {
        $(this).addClass('clicked').siblings().removeClass('clicked');
    });
});

对于多个答案：

$(function() {
    $('.question.multipleanswers .option').click(function() {
        $(this).toggleClass('clicked');
    });
});

如果您愿意，可以将这两个功能结合起来。

优化代码，分别为多个部分中的选定项添加类

1 个答案: