为隐藏的 div 内容添加随机播放，并在点击时循环遍历每个内容

Question

首先，感谢您提供的任何帮助。

我正在尝试在我的 60 多个问题列表中添加一些随机性。 当您单击该问题时，在您单击每个问题后，它将为该特定问题提供一个答案。循环浏览它们会很棒，然后以“谢谢”结束。

$(document).ready( function() {

$('.truth2').hide()
$('.truth3').hide()
$('.truth4').hide()
$('.truth5').hide()


$('.youcould2').hide()
$('.youcould3').hide()
$('.youcould4').hide()
$('.youcould5').hide()
$('.youcould6').hide()



$('#replaceLink a').click(function(){
 $(this).hide().siblings().show()
  var w = this.hash.replace('#', '');
$('#result div.truth'+w).show().siblings().hide()
 })
} );

这是我所在的位置：http://jsfiddle.net/thedeej/ssWEQ/9/

Answer 1

这里有一个解决方案。它需要对您的 HTML 进行一些更改，特别是：

• 将所有答案分配到同一类（真相）
• 为每个答案分配一个唯一的类或 ID：（tr1、tr2 等）
• 为每个问题分配相同的班级（你可以）
• 为每个问题分配一个唯一的类或 ID：（yc1、yc2 等）
• 将所有 div 设为同级，而不是子级

Working jsFiddle example

---

HTML：

<div id="result">
    <div class="truth tr0"><h2>---</h2></div>
    <div class="truth tr1"><h2>answer to one</h2></div>
    <div class="truth tr2"><h2>answer to two</h2></div>
    <div class="truth tr3"><h2>answer to three</h2></div>
    <div class="truth tr4"><h2>answer to four</h2></div>
    <div class="truth tr5"><h2>answer to five</h2></div>
    <div class="truth tr6"><h2>answer to six</h2></div>
 </div>   

<div id="replaceLink">
    <div class="youcould yc1">
        <a href="#2"><h2>QUESTION ONE</h2></a>
    </div>
    <div class="youcould yc2">
        <a href="#3"><h2>QUESTION TWO</h2></a>
    </div>
    <div class="youcould yc3">
        <a href="#4"><h2>QUESTION THREE</h2></a>
    </div>
    <div class="youcould yc4">
        <a href="#5"><h2>QUESTION FOUR</h2></a>
    </div>
    <div class="youcould yc5">
        <a href="#5"><h2>QUESTION FIVE</h2></a>
    </div>
    <div class="youcould yc6">
        <a href="#5"><h2>QUESTION SIX</h2></a>
    </div>
    <div class="youcould yc7">
        <a href="#6"><h2>THANK YOU</h2></a>
    </div>
</div>

<div id="response"></div>
<input type="button" id="mybutt" value="Start Test" />

Javascript/jQuery：

arrDone = [];
$(document).ready(function () {

    //http://stackoverflow.com/questions/1527803/generating-random-numbers-in-javascript-in-a-specific-range
    function getRandomInt (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function nextQues() {
        //If all six questions asked, quit
        if (arrDone.length == 6) return 7;

        success = 0;
        while (success == 0) {
            nn = getRandomInt(1, 6);
            if (arrDone.indexOf(nn) == -1) {
                success++;
                arrDone.push(nn);
            }
        }
        return nn;
    }

    $('.youcould, .truth').hide();
    $('.tr0').show();

    $('.youcould').click(function() {
        $(this).hide();

        //Get last-entered element from array
        thisA = arrDone[arrDone.length -1];
        $('.tr'+thisA).show();
    });

    $('.truth').click(function() {
        $(this).hide();
        if (arrDone.length == 6){
            $(this).removeClass('truth');
            $('#replaceLink').html('<div><h1>Test is Over.</h1><div>');
        }else{
            nextQ = nextQues();
            $('.yc'+nextQ).show();
        }
    });

    $('#mybutt').click(function () {
        $(this).hide();
        $('.tr0').hide();
        nextQ = nextQues();
        $('.yc'+nextQ).show();
    });

}); //END document.ready