Question

嘿，伙计们，我有一些我无法解决的问题。我对jquery了解不多，所以我希望你能帮助我。

基本上我有一个在div中有问题的测验脚本，我想当一个人检查radiobox并按下“下一个问题”按钮时，当前的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>

每个问题区都有一个唯一的ID和同一个类。

以下是一些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
  }
    });
}

这个脚本的问题在于，在我按下它之后，它将fadesOut和FadesIn良好，然后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添加了它们，以便维护Unobtrusive Javascript的规则。

您可以在此处查看演示：http://jsfiddle.net/t7P45/

Answer 3

我已经更改了HTML中的下一个链接，并且正在连接jquery文档就绪方法中的所有事件。

<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 page设置上查看所有操作

Answer 4

我认为你过分复杂了。试试这个：

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

你需要稍微调整一下以获得你想要的褪色效果，但这应该不是很困难。一个demo。

Jquery和下一个淡入

4 个答案: