Question

以下示例工作正常，但我想看看是否有一种方法可以进一步重构代码，而不必为我可能添加到页面的每个后续问题/答案集添加一个单击事件处理程序。 / p>

所以不必添加另一个＆＃34;点击＆＃34;事件处理程序，重复脚本：

$(document).ready(function () {
    $('.answer1.option').click(function () {
        $(this).removeClass('not-selected');
        $('.answer1.option').not(this).addClass('not-selected');
    });
    $('.answer2.option').click(function () {
        $(this).removeClass('not-selected');
        $('.answer2.option').not(this).addClass('not-selected');
    });
});

代码只使用单击事件处理程序，并将其用于任何后续的问题/答案集。

我希望找到一个可能需要某种变量的答案，并使用它来迭代选项。有什么想法吗？

这是一个JSfiddle，可以直观地解释我的意思和我最终寻找的功能：

http://jsfiddle.net/Rq4rp/

Answer 1

你可以捏一下这个。通过使用这个和兄弟姐妹。

$(document).ready(function () {
    $('.option').click(function () {
        $(this).removeClass('not-selected');
        $(this).siblings().addClass('not-selected');
    });
});

这将再次适用于兄弟姐妹，您永远不需要实际指定具体答案。

http://jsfiddle.net/Rq4rp/3/

正如@YuryTarabanko指出的那样，你可以更加浓缩这一点 -

$(document).ready(function () {
    $('.option').click(function () {
        var cls = "not-selected"
        $(this).removeClass(cls).siblings().addClass(cls);
    });
});

http://jsfiddle.net/Rq4rp/5/

Answer 2

以下是我要做的事情......您将所有选项都放入<div class="answerContainer">...</div>

并使用此代码执行：

$(document).on('click', '.answerContainer .option', function(){
    $(this).removeClass('not-selected');
    $(this).siblings().addClass('not-selected');
});

示例小提琴：http://jsfiddle.net/Rq4rp/4/

需要重构帮助

2 个答案: