Как вы предотвращаете случайное число от создания изображения дважды в строке в 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>
Если вы не хотите показывать случайное число два раза подряд, объявите глобальную переменную и сохраните недавнее случайное число.
сравнить новое случайное число с недавним случайным числом, если оба равны, снова вычислить случайное число
например
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
It must be done in jQuery and not JavaScript.
JQuery это JavaScript. Если вы делаете это в jQuery, вы делаете это в JavaScript.