Jquery и следующий исчезают

Question

Эй, ребята, у меня есть небольшая проблема, которую я не могу решить.Я не очень разбираюсь в jquery, поэтому надеюсь, что вы мне поможете.

По сути, у меня есть скрипт викторины, в котором есть вопросы по div, я хочу, чтобы человек проверял radiobox и нажимал "next"Кнопка «вопрос», текущий div исчезнет, ​​а следующий div исчезнет. Вот как выглядит HTML-код:

    <div id="questions">
    <div id="question0" class="question">
    <span style="verhnij">Title</span> 
    <li><input type="radio" name="q_0" value="0"> 0</li>
     <li><input type="radio" name="q_0" value="2">2</li>
     <li><input type="radio" name="q_0" value="1">1</li> 
    <a href="" onclick="javascript: transition(0);">Next</a>
    </div>
    <div id="question1" class="question">
    <span style="verhnij">Title</span> 
    <li><input type="radio" name="q_1" value="2">2</li>
     <li><input type="radio" name="q_1" value="0">0</li>
     <li><input type="radio" name="q_1" value="1">1</li> 
   <a href="" onclick="javascript: transition(1);">Next</a>
    </div>
    <div id="question2" class="question">
    <span style="verhnij">Title</span> 
    <li><input type="radio" name="q_2" value="1">1</li> 
    <li><input type="radio" name="q_2" value="2">2</li> 
    <li><input type="radio" name="q_2" value="0">0</li> 
  <a href="" onclick="javascript: transition(2);">Next</a>
    </div>

Каждый Div Div имеет уникальный идентификатор и тот же класс.

Вот некоторые из javascript.

$('#questions').ready(function(){

    for (i = 1; i < 100; i++) {
      if ($('#question' + i).length > 0) {
            $('#question' + i).hide();

  } else {
            break;
        }

  }



});

function transition(question_id) {
    $('#question' + question_id).fadeOut('fast',function() {

           question_id++;
        if ($('#question' + question_id).length > 0) {
           $('#question' + question_id).fadeIn('fast');
        } else {
            Here will be Form submit
  }
    });
}    

Проблема с этим сценарием в том, что после того, как я нажимаю next, он fadesOut и FadesIn good, а затем функция ready перезаписывает все и снова появляется вопрос 0.Помощь очень ценится.

Спасибо.

Answer 1

Вам нужно запретить перезагрузку страницы, когда вы нажимаете на ссылку, иначе вы снова перезапускаете все это: поскольку вы используете тег "a", вам необходимо:

1) добавить # как атрибут href вместо ничего (href="#").

2) вернуть false из вашей функции перехода:

function transition(question_id) {
    $('#question' + question_id).fadeOut('fast', function() {
        question_id++;
        if ($('#question' + question_id).length > 0) {
            $('#question' + question_id).fadeIn('fast');
        } else {}
    });
    return false;
}

(извините за формат, я только что отредактировал свой пост 10 раз, но безрезультатно)

Answer 2

Попробуйте изменить HTML-код, чтобы он соответствовал следующему:

<div id="questions">
    <div class="question" id="question1">
        <span>Title</span>
        <li><input type="radio" name="q_0" value="0"> 0</li>
        <li><input type="radio" name="q_0" value="2">2</li>
        <li><input type="radio" name="q_0" value="1">1</li>
        <a href="#" class="next">Next</a>
    </div>
    <div class="question" id="question2">
        <span>Title</span>
        <li><input type="radio" name="q_1" value="2">2</li>
        <li><input type="radio" name="q_1" value="0">0</li>
        <li><input type="radio" name="q_1" value="1">1</li>
        <a href="#" class="next">Next</a>
    </div>
    <div id="question3" class="question">
        <span>Title</span>
        <li><input type="radio" name="q_2" value="1">1</li>
        <li><input type="radio" name="q_2" value="2">2</li>
        <li><input type="radio" name="q_2" value="0">0</li>
        <a href="#" class="next">Next</a>
    </div>
</div>

А твой скрипт к этому:

$(function() {
    $('div.question').hide();
    $('div.question:first').show();
    $('.next').click(function() {
        transition($(this).closest('.question'));
        return false;
    });
});

function transition($question) {
    $question.fadeOut('fast',function() {

        if ($question.attr('id') !== $('.question:last').attr('id')) {
            $question.next('.question').fadeIn('fast');
        } else {
            alert('done!');
        }
    });
}

Я удалил onclick из ваших ссылок и добавил их через jQuery, чтобы сохранить правила ненавязчивого JavaScript.

Вы можете посмотреть демо здесь: http://jsfiddle.net/t7P45/

Answer 3

Я думаю, вы немного усложняете вещи.Попробуйте это:

  <div id="questions">
    <div id="question0" class="question askme">
    <span style="verhnij">Title 1</span> 
    <li><input type="radio" name="q_0" value="0"> 0</li>
     <li><input type="radio" name="q_0" value="2">2</li>
     <li><input type="radio" name="q_0" value="1">1</li> 
    <a href="next">Next</a>
    </div>
    <div id="question1" class="question askme">
    <span style="verhnij">Title 2</span> 
    <li><input type="radio" name="q_1" value="2">2</li>
     <li><input type="radio" name="q_1" value="0">0</li>
     <li><input type="radio" name="q_1" value="1">1</li> 
   <a href="next">Next</a>
    </div>
    <div id="question2" class="question askme">
    <span style="verhnij">Title 3</span> 
    <li><input type="radio" name="q_2" value="1">1</li> 
    <li><input type="radio" name="q_2" value="2">2</li> 
    <li><input type="radio" name="q_2" value="0">0</li> 
  <a href="next">Next</a>
 </div>​​​​​​​

JS:

​$(function() {
    $(".question").hide();
    $(".question:first").show();

    $("a").click(function() { 
        $(this).parent(".question").removeClass("askme").hide();
        $(".askme:first").show();
        return false;
    });
});

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

Answer 4

Я изменил следующие ссылки в HTML и подключаю все события в методе jquery document ready.

<div id="questions">
    <div id="question0" class="question">
    <span style="verhnij">Title 1</span> 
    <li><input type="radio" name="q_0" value="0"> 0</li>
     <li><input type="radio" name="q_0" value="2">2</li>
     <li><input type="radio" name="q_0" value="1">1</li> 
    <a href="#" class="next">Next</a>
    </div>
    <div id="question1" class="question">
    <span style="verhnij">Title 2</span> 
    <li><input type="radio" name="q_1" value="2">2</li>
     <li><input type="radio" name="q_1" value="0">0</li>
     <li><input type="radio" name="q_1" value="1">1</li> 
   <a href="#" class="next">Next</a>
    </div>
    <div id="question2" class="question">
    <span style="verhnij">Title 3</span> 
    <li><input type="radio" name="q_2" value="1">1</li> 
    <li><input type="radio" name="q_2" value="2">2</li> 
    <li><input type="radio" name="q_2" value="0">0</li> 
  <a href="#" class="next">Next</a>
        </div>

А вот и материал jQuery

$(function(){
    $('div.question').hide(); // hide all questions
    $('#question0').show(); // show first one
    $('a.next').click(function(e) { // hook up the click events
        e.preventDefault(); // prevents the link from being followed
        $(this).parent('div.question').fadeOut('fast');
        $(this).parent('div.question').next().fadeIn('fast');
    });
}); ​

Вы можете увидеть все это в действии на этой странице jsFiddle Я настроен для работы с ним