Question

如何防止随机数在jQuery中连续两次显示图像？

fadeOut和fadeIn有三个数组。

下面的jQuery代码和HTML代码：

<script type="text/javascript">
jQuery(

    function(){
        var cardTitle = new Array();
            cardTitle[0] = "You've picked Judgment...";
            cardTitle[1] = "You've picked the Magician...";
            cardTitle[2] = "You've picked Strength...";
            cardTitle[3] = "You've picked the High Priestess...";
            cardTitle[4] = "You've picked the World...";

        var cardDesc = new Array();
            cardDesc[0] = "Judgment tells...";
            cardDesc[1] = "The Magician generally...";
            cardDesc[2] = "Strength is the rawest...";
            cardDesc[3] = "Your identification...";
            cardDesc[4] = "The World is...";

        var drawCard = new Array();
            drawCard[0] = "judgement.jpg"; 
            drawCard[1] = "magician.jpg"; 
            drawCard[2] = "strength.jpg"; 
            drawCard[3] = "theHighPriestess.jpg"; 
            drawCard[4] = "theWorld.jpg";

    $("#myBtn").click(

        function(){


            var drawNum = Math.floor(Math.random() * cardTitle.length);


            $("h3").fadeOut(
                function(){
                    $("#newTitle").html(cardTitle[drawNum]).fadeIn();
                }); 

            $("p").fadeOut(
                function(){
                    $("#newDesc").html(cardDesc[drawNum]).fadeIn();
                });         

            $("img").fadeOut(
                function(){
                    $("#showImage").attr('src', 'images/' + drawCard[drawNum]).fadeIn();
                });


            } //end click function
    ); //end click

}); //end jQuery container
</script>




<body>
  <img src="images/drawCard.jpg" id="showImage">
  <input type = "button" id="myBtn" value="Click Here to Pick a Card" />
  <h3 id="newTitle">Welcome to Madam Athena's Tarot Card Reading</h3>
  <p id="newDesc">Free your mind...</p>
</body>

Answer 1

如果您不想连续两次显示一个随机数，请声明一个全局变量并保存最近的随机数。

将新随机数与最近的随机数进行比较，如果两者相等，则再次计算随机数

例如

var previousRandomNumber = 0; // this should be outside of click function and be global to access

do {
drawNum = Math.floor(Math.random() * cardTitle.length);
}while (drawNum == previousRandomNumber)

previousRandomNumber =  drawNum ;

另一个要记住的重要事项是javascript不会等到完成时

所以你应该在一个单独的函数中分离你的shuffle逻辑，并在do while中调用。

完整的工作示例：http://jsfiddle.net/k4QH4/1/

var cardTitle = new Array();
            cardTitle[0] = "You've picked Judgment...";
            cardTitle[1] = "You've picked the Magician...";
            cardTitle[2] = "You've picked Strength...";
            cardTitle[3] = "You've picked the High Priestess...";
            cardTitle[4] = "You've picked the World...";

        var cardDesc = new Array();
            cardDesc[0] = "Judgment tells...";
            cardDesc[1] = "The Magician generally...";
            cardDesc[2] = "Strength is the rawest...";
            cardDesc[3] = "Your identification...";
            cardDesc[4] = "The World is...";

        var drawCard = new Array();
            drawCard[0] = "judgement.jpg"; 
            drawCard[1] = "magician.jpg"; 
            drawCard[2] = "strength.jpg"; 
            drawCard[3] = "theHighPriestess.jpg"; 
            drawCard[4] = "theWorld.jpg";
var previousRandomNumber = 0;

$("#myBtn").click(

        function(){


            var drawNum;

            do {
            drawNum = Math.floor(Math.random() * cardTitle.length);
                if(drawNum != previousRandomNumber){
                shuffle(drawNum);
                }
            }while (drawNum == previousRandomNumber)


            previousRandomNumber =  drawNum ;

            } //end click function
    ); //end click


function shuffle(drawNum) {

$("h3").fadeOut(
                function(){
                    $("#newTitle").html(cardTitle[drawNum]).fadeIn();
                }); 

            $("p").fadeOut(
                function(){
                    $("#newDesc").html(cardDesc[drawNum]).fadeIn();
                });         

            $("img").fadeOut(
                function(){
                    $("#showImage").attr('src', 'images/' + drawCard[drawNum]).fadeIn();
                });
}

如果您有任何其他问题，请告诉我

[基于评论请求的变更]

var cardTitle = new Array();
            cardTitle[0] = "You've picked Judgment...";
            cardTitle[1] = "You've picked the Magician...";
            cardTitle[2] = "You've picked Strength...";
            cardTitle[3] = "You've picked the High Priestess...";
            cardTitle[4] = "You've picked the World...";

        var cardDesc = new Array();
            cardDesc[0] = "Judgment tells...";
            cardDesc[1] = "The Magician generally...";
            cardDesc[2] = "Strength is the rawest...";
            cardDesc[3] = "Your identification...";
            cardDesc[4] = "The World is...";

        var drawCard = new Array();
            drawCard[0] = "judgement.jpg"; 
            drawCard[1] = "magician.jpg"; 
            drawCard[2] = "strength.jpg"; 
            drawCard[3] = "theHighPriestess.jpg"; 
            drawCard[4] = "theWorld.jpg";
var previousRandomNumber = 0;

$("#myBtn").click(

        function(){


            var drawNum;

            do {
            drawNum = Math.floor(Math.random() * cardTitle.length);
                if(drawNum != previousRandomNumber){
                   $("h3").fadeOut(
                    function(){
                    $("#newTitle").html(cardTitle[drawNum]).fadeIn();
                   }); 

                  $("p").fadeOut(
                   function(){
                    $("#newDesc").html(cardDesc[drawNum]).fadeIn();
                  });         

                  $("img").fadeOut(
                   function(){
                    $("#showImage").attr('src', 'images/' + drawCard[drawNum]).fadeIn();
                  });
                }

            }while (drawNum == previousRandomNumber)

           previousRandomNumber =  drawNum ;




            } //end click function
    ); //end click

防止随机数连续显示两次

1 个答案: