Jquery和下一个淡入

嘿，伙计们，我有一点问题我解决不了。我对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>

标题
0
二,
1
标题
二,
0
1
标题
1
2
0

每个问题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
  }
    });
}    

$（“#问题”）.ready（函数（）{
对于（i=1；i<100；i++）{
如果（$（'#问题'+i）.length>0）{
$（'问题'+i）.hide（）；
}否则{
打破
}
}
});
功能转换（问题编号）{
$（'question'+question_id）.fadeOut（'fast'，function（）{
问题_id++；
如果（$（“#问题”+问题id）.length>0）{
$（'question'+question_id）.fadeIn（'fast'）；
}否则{
这是我们提交的表格
}
});
}    

这个脚本的问题是，在我按下“下一步”后，它会淡出，淡出状态良好，然后就绪函数会覆盖所有内容，然后再次弹出问题0。 我真的很感激你的帮助

---

谢谢。

我已经更改了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>

---

您可以在这个I设置上看到所有的操作，要使用它

您需要防止在单击链接时重新加载页面，否则您将再次重新启动整个过程：因为您使用的是“a”标记，您需要：

1） 添加#as 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次，但都没有用）

尝试更改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>

我已经从您的链接中删除了onclick，并通过jQuery添加了它们，以维护低调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
  }
    });
}    

---

你可以在这里观看演示：

我觉得你把事情复杂化了一点。试试这个：

  <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>​​​​​​​

---

你必须稍微调整一下以获得你想要的淡入效果，但这应该不是很难。A.

不，不行。不过，在我按下下一个问题后，它会变回第一个问题。好吧，我尝试了两种方法，添加了“return false”和“href=#”，但它仍然会切换回。我已经在我的电脑上运行了它，并进行了我描述的更改，它正在工作。。。您需要两个更改才能使其工作。好的，谢谢，我修复了它，而不是使用我使用的链接。现在一切都好了，谢谢。

  <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>​​​​​​​

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

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