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