Question

我现在尝试的是，有一个提交按钮，可以设置选项并记录分数，我想我正在努力如何遍历DOM。我想我试图选择一个兄弟姐妹的孩子。而且我不确定为什么我目前的代码不能用于此目的。

<div class='section' id='s1'>
    <div class='center' id='center1'>
        <div class='question' id='q1'>
        </div>
        <div class='choices' id='choices1'>
            <p class='a'>Choice A</p>
            <p class='b'>Choice B</p>
            <p class='c'>Choice C</p>
            <p class='d'>Choice D</p>
        </div>

        <input type='submit' value='Submit' class='submit'>
        <p class='score'></p>
    </div>
</div>

var score = 0;
$('.choices p').on('click', function() {
    $(this).closest('.choices').find('p').removeClass('selected');
    $(this).addClass('selected');
});

$('.submit').click(function() {
    var choice = $(this).prev('.choices').children().find('selected');
    if (choice.hasClass('a')) {
        score += 1;
    }
    else if (choice.hasClass('b')) {
        score += 2;
    }

    $(this).prev('.choices').find('p').off('click');
    $('.score').text('Score is ' + score);
});

Answer 1

您有一些语法错误。试试吧？

http://jsfiddle.net/tallrye/bqpg1a8L/

$('.choices p').on('click', function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
});

$('.submit').click(function() {
    var score = 0;
    var choice = $('.selected');
    if (choice.hasClass('a')) {
        score += 1;
    }
    else if (choice.hasClass('b')) {
        score += 2;
    }

    $(this).prev('.choices').find('p').off('click');
    $('.score').text('Score is ' + score);
});

Answer 2

为什么不

$('.choices p').on('click', function() {
        $('.choices p.selected').removeClass('selected');
        $(this).addClass('selected');
});

$('.submit').click(function() {
        var choice = $('.choices p.selected');
        if (choice.hasClass('a')) {
            score += 1;
        }
        else if (choice.hasClass('b')) {
            score += 2;
        }

        $('.choices p').off('click');
        $('.score').text('Score is ' + score);
 });

Answer 3

您好我已经tallrye回答，但要避免删除您网页中的所有选定课程，您可能需要使用

.siblings（）removeClass（＆＃34;选择＆＃34）。

因此它只会删除div.choices中选择的类

<div class='choices' id='choices1'>
        <p class='a'>Choice A</p>
        <p class='b'>Choice B</p>
        <p class='c'>Choice C</p>
        <p class='d'>Choice D</p>
</div>

下面：

 $('.choices p').on('click', function() {      
   $(this).addClass('selected').siblings().removeClass("selected");
});

如何选择兄弟元素的子元素

3 个答案: