Радио кнопки - показывают DIV на основе отмеченной кнопки с помощью jQuery - PullRequest
Новая
       13

Радио кнопки - показывают DIV на основе отмеченной кнопки с помощью jQuery

1 голос
/ 02 августа 2010

Я пытаюсь добиться следующего - из списка вопросов, каждый из которых имеет 4 ответа с несколькими вариантами ответов, мне нужно показать, правильно ли пользователь ответил (немедленно), показывая, был ли он правильным или неправильным после нажатия кнопки-переключателя..

Вот пример вопроса: 

<ol>
<li id="question_one">
<p><input type="radio" name="question_1" value="answer_1" />Corn</p>
<p><input type="radio" name="question_1" value="answer_2" />Cotton</p>
<p><input type="radio" name="question_1" value="answer_3" />Rice</p>
<p><input type="radio" name="question_1" value="answer_4" />Soybeans</p>
</li>
</ol>

<div id="q1_answer_1" class="show_answer">Corn 11.0%</div>
<div id="q1_answer_2" class="show_answer">Cotton 2.5%</div>
<div id="q1_answer_3" class="show_answer">Rice 11.0%</div>
<div id="q1_answer_4" class="show_answer">Soybeans 7.0%</div>

И полученный jquery: 

$("#question_one input:radio:eq(answer_1)").click(function(){
$("#q1_answer_1").show(100);
});

$("#question_one input:radio:eq(answer_2)").click(function(){
$("#q1_answer_2").show(100);
});

$("#question_one input:radio:eq(answer_3)").click(function(){
$("#q1_answer_3").show(100);
});

$("#question_one input:radio:eq(answer_4)").click(function(){
$("#q1_answer_4").show(100);
});

Я считаю, что это не сработает, потому что eq() будетработать только для числовых значений?Есть ли эквивалент eq(), который будет работать для входных значений?Или какие-либо другие предложения относительно того, как вышеперечисленное может работать?

Большое спасибо

Ответы [ 2 ]

4 голосов
/ 02 августа 2010

Если вы хотите, чтобы оно было немного более общим, вы можете сделать это на основе значения, например: 

$("#question_one :radio[name=question_1]").change(function() {
    $("div.show_answer").hide();
    $("#q1_" + $(this).val()).show(100);
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Вы можете попробовать здесь , илиесли вам нужно более общее, скажем, у вас есть несколько вопросов, просто оберните каждый из блоков HTML выше в контейнере, например <div class="question"></div>, тогда вы можете сделать что-то вроде этого: 

$(".question :radio[name=question_1]").change(function() {
    $(this).closest(".question").find("div.show_answer").hide()
           .filter("[id$='" + $(this).val() +"']").show(100);
});​

Вы можете проверить эту версию здесь , она будет работать для нескольких вопросов без дублирования вашего кода для каждого.

Для комментариев: Чтобы убить ее после первого нажатияу вас есть несколько вариантов, вы можете отключить их, добавив их в обработчик ( test here ): 

$(this).closest('li').find(':radio').attr('disabled', true);

Или, если вы хотите включить изменение, но не отображать ответ снова,просто отвяжите их ( тест здесь ): 

$(this).closest('li').find(':radio').unbind('change');
0 голосов
/ 02 августа 2010

Попробуйте использовать псевдо-селектор: проверено, вот так: $ ("# вопрос_вход: проверено") ....

...