Как выбрать дочернего элемента родного брата

Сейчас я пытаюсь найти кнопку "Отправить", которая установит выбор и запишет счет, и я думаю, что я борюсь с тем, как пройти 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);
});

3 ответа

Решение

Почему бы и нет

$('.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);
 });

У вас есть некоторые синтаксические ошибки. Может быть, попробовать?

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);
});

Привет, я хотел бы ответить с tallrye, но, чтобы избежать удаления всех выбранных классов на вашей странице, вы можете использовать

.siblings().removeClass("выбрано")

поэтому он будет удалять только класс, выбранный внутри вашего 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");
});
Другие вопросы по тегам