Предотвращение показа случайных чисел дважды подряд

0

Как вы предотвращаете случайное число от создания изображения дважды в строке в 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 Tarot Card Reading</h3>
  <p id="newDesc">Free your mind...</p>
</body>
  • 2
    It must be done in jQuery and not JavaScript. JQuery это JavaScript. Если вы делаете это в jQuery, вы делаете это в JavaScript.
  • 2
    Если вы хотите показать список вещей, каждый раз в случайном порядке, вы должны использовать алгоритм перемешивания . Хорошим примером может служить алгоритм случайного перемешивания Фишера-Йейтса .
Теги:
math
numbers
random

1 ответ

2
Лучший ответ

Если вы не хотите показывать случайное число два раза подряд, объявите глобальную переменную и сохраните недавнее случайное число.

сравнить новое случайное число с недавним случайным числом, если оба равны, снова вычислить случайное число

например

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 не будет ждать, пока это будет завершено

поэтому вы должны разделить свою логику перетасовки на отдельную функцию и вызвать внутри внутри.

Полный рабочий пример: 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
    Потрясающие. Ты жжешь!
  • 0
    Просто из любопытства, но это там, чтобы сделать это без плагина. Без тасования что ли?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню