Как добавить элемент по индексу выборки
Всем привет,
Мне нужно после заголовка h1 в блоке .mess_win добавить html-код <img src="img/random.png" alt=""> <img src="img/random.png" alt=""> <img src="img/random.png" alt=""> При этом выборка <img src="img/random.png" alt=""> происходит из блока .roulette-1 В скрипте пишу так:
function popUp(){
if(param2.stopImageNumber == param1.stopImageNumber &&
param2.stopImageNumber == param3.stopImageNumber){
var images = $('.roulette-1 > img');
$(".mess_win > h1").after(images[param2.stopImageNumber]);
$('.mess_win').fadeIn(300);
}
}
HTML такой: <div class="roulette_container" > <div class="ball"><img src="img/ball.png"/></div> <div class="stick"><img src="img/stick.png"/></div> <div class="roulette-1"> <img src="img/star.png"/> <img src="img/flower.png"/> <img src="img/coin.png"/> <img src="img/mshroom.png"/> <img src="img/chomp.png"/> <img src="img/random.png"/> </div> <div class="roulette-2"> <img src="img/star.png"/> <img src="img/flower.png"/> <img src="img/coin.png"/> <img src="img/mshroom.png"/> <img src="img/chomp.png"/> <img src="img/random.png"/> </div> <div class="roulette-3"> <img src="img/star.png"/> <img src="img/flower.png"/> <img src="img/coin.png"/> <img src="img/mshroom.png"/> <img src="img/chomp.png"/> <img src="img/random.png"/> </div> <div class="btn_container"> <p> <button class="btn btn-large btn-primary start"> START </button> <button class="btn btn-large btn-danger stop"> STOP </button> </p> </div> </div> <div class="mess_win"> <h1>Поздравляем!</h1> <p><strong>Вы выиграли бесплатную доставку от нашей компании!</strong></p> <p>Для того, чтобы узнать, как Вы можете воспользоваться данным призом, свяжитесь с вашим персональным менеджером.</p> </div> |
Цитата:
|
Пробовал ещё так:
var images = $('.roulette-1 > img[src]:eq('+param2.stopImageNumber+')');
$(".mess_win > h1").after('<img src="'+images+'" alt="">');
$('.mess_win').fadeIn(300);
|
Цитата:
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
var i=2;
var o=$('.roulette-1 > img').eq(i);
alert(o.attr('src'));
});
</script>
</script>
</head>
<body>
<div class="roulette_container" >
<div class="ball"><img src="img/ball.png"/></div>
<div class="stick"><img src="img/stick.png"/></div>
<div class="roulette-1">
<img src="img/star.png"/>
<img src="img/flower.png"/>
<img src="img/coin.png"/>
<img src="img/mshroom.png"/>
<img src="img/chomp.png"/>
<img src="img/random.png"/>
</div>
<div class="roulette-2">
<img src="img/star.png"/>
<img src="img/flower.png"/>
<img src="img/coin.png"/>
<img src="img/mshroom.png"/>
<img src="img/chomp.png"/>
<img src="img/random.png"/>
</div>
<div class="roulette-3">
<img src="img/star.png"/>
<img src="img/flower.png"/>
<img src="img/coin.png"/>
<img src="img/mshroom.png"/>
<img src="img/chomp.png"/>
<img src="img/random.png"/>
</div>
<div class="btn_container">
<p>
<button class="btn btn-large btn-primary start"> START </button>
<button class="btn btn-large btn-danger stop"> STOP </button>
</p>
</div>
</div>
<div class="mess_win">
<h1>Поздравляем!</h1>
<p><strong>Вы выиграли бесплатную доставку от нашей компании!</strong></p>
<p>Для того, чтобы узнать, как Вы можете воспользоваться данным призом, свяжитесь с вашим персональным менеджером.</p>
</div>
</body>
</html>
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
var i=2;
var o=$('.roulette-1 > img').eq(i);
var ot=$('.mess_win > h1');
for (var i=0; i<3; i++) {
$(o.clone()).insertAfter(ot);
};
});
</script>
</script>
</head>
<body>
<div class="roulette_container" >
<div class="ball"><img src="img/ball.png"/></div>
<div class="stick"><img src="img/stick.png"/></div>
<div class="roulette-1">
<img src="img/star.png"/>
<img src="img/flower.png"/>
<img src="img/coin.png"/>
<img src="img/mshroom.png"/>
<img src="img/chomp.png"/>
<img src="img/random.png"/>
</div>
<div class="roulette-2">
<img src="img/star.png"/>
<img src="img/flower.png"/>
<img src="img/coin.png"/>
<img src="img/mshroom.png"/>
<img src="img/chomp.png"/>
<img src="img/random.png"/>
</div>
<div class="roulette-3">
<img src="img/star.png"/>
<img src="img/flower.png"/>
<img src="img/coin.png"/>
<img src="img/mshroom.png"/>
<img src="img/chomp.png"/>
<img src="img/random.png"/>
</div>
<div class="btn_container">
<p>
<button class="btn btn-large btn-primary start"> START </button>
<button class="btn btn-large btn-danger stop"> STOP </button>
</p>
</div>
</div>
<div class="mess_win">
<h1>Поздравляем!</h1>
<p><strong>Вы выиграли бесплатную доставку от нашей компании!</strong></p>
<p>Для того, чтобы узнать, как Вы можете воспользоваться данным призом, свяжитесь с вашим персональным менеджером.</p>
</div>
</body>
</html>
|
Странно, у меня почему-то не работает
function popUp(){
if(param2.stopImageNumber == param1.stopImageNumber &&
param2.stopImageNumber == param3.stopImageNumber){
var j = param2.stopImageNumber;
var image = $('.roulette-1 > img').eq(j);
var elem = $('.mess_win > h1');
for (var i = 0; i < 3; i++) {
$(image.clone()).insertAfter(elem);
};
$('.mess_win').fadeIn(300);
}
}
|
Вот весь скрипт
$(function(){
"use strict"
// функция генерации случайного значения
function randomInteger(min, max) {
var rand = min - 0.5 + Math.random() * (max - min + 1);
rand = Math.round(rand);
return rand;
}
// функция вызова сооообщения о результате
function popUp(){
if(param2.stopImageNumber == param1.stopImageNumber &&
param2.stopImageNumber == param3.stopImageNumber){
var j = param2.stopImageNumber;
var image = $('.roulette-1 > img').eq(j);
var elem = $('.mess_win > h1');
for (var i = 0; i < 3; i++) {
$(image.clone()).insertAfter(elem);
};
$('.mess_win').fadeIn(300);
}
}
function check(){
// for(var i in param1){
// console.log(param1[i]);
// }
// for(var j in param2){
// console.log(param2[j]);
// }
// for(var k in param3){
// console.log(param3[k]);
// }
console.log('Скорость вращения: '+param1.speed, param2.speed, param3.speed+'\n');
console.log('Длительность: '+param1.duration, param2.duration, param3.duration+'\n');
console.log('Стоп картинка: '+param1.stopImageNumber, param2.stopImageNumber, param3.stopImageNumber+'\n');
}
// задаём интервал для генерации случайного значения
var numMin = 0;
var numMax = 5;
var win = true // переключатель возможности выигрыша
var a;
// функция генерации нового случйного значения stopImageNumber
function updateNumber(){
if(win){// совпадения допускаются
param1.stopImageNumber = 1;
param2.stopImageNumber = 1;
param3.stopImageNumber = 1;
rouletter1.roulette('option',param1);
rouletter2.roulette('option',param2);
rouletter3.roulette('option',param3);
}
else{// совпадения НЕ допускаются
param1.stopImageNumber = randomInteger(numMin, numMax);
param2.stopImageNumber = randomInteger(numMin, numMax);
param3.stopImageNumber = randomInteger(numMin, numMax);
// в случае совпадения
if(param2.stopImageNumber == param1.stopImageNumber &&
param2.stopImageNumber == param3.stopImageNumber){
param2.stopImageNumber = param1.stopImageNumber + 1;
param3.stopImageNumber = param1.stopImageNumber - 1;
}
rouletter1.roulette('option',param1);
rouletter2.roulette('option',param2);
rouletter3.roulette('option',param3);
}
}
// задаём параметры 1-го слота
var param1 = {
speed : 10,
duration : 2,
stopImageNumber : a,
startCallback : function() {
$('.start').attr('disabled', 'true');
$('.stop').removeAttr('disabled');
},
slowDownCallback : function() {
$('.stop').attr('disabled', 'true');
},
stopCallback : function($stopElm) {
$('.start').removeAttr('disabled');
$('.stop').attr('disabled', 'true');
}
}
// задаём параметры 2-го слота
var param2 = {
speed : 5,
duration : 3,
stopImageNumber : a
}
// задаём параметры 3-го слота
var param3 = {
speed : 8,
duration : 4,
stopImageNumber : a
}
// применяем метод roulette() к слотам
var rouletter1 = $('div.roulette-1');
rouletter1.roulette(param1);
var rouletter2 = $('div.roulette-2');
rouletter2.roulette(param2);
var rouletter3 = $('div.roulette-3');
rouletter3.roulette(param3);
// обработчики кнопок
$('.stop').click(function(){
updateNumber(); // запуск апдейта номера
rouletter1.roulette('stop');
rouletter2.roulette('stop');
rouletter3.roulette('stop');
});
$('.stop').attr('disabled', 'true');
$('.start, .ball').click(function(){
var time = Math.max(param1.duration, param2.duration, param3.duration) * 1000 + 1500;
setTimeout(popUp,time); // запуск окна с выигрышем
updateNumber(); // запуск апдейта номера
check();
rouletter1.roulette('start');
rouletter2.roulette('start');
rouletter3.roulette('start');
console.log(time);
$('.ball').addClass('animate-1');
$('.stick').addClass('animate-2');
setTimeout(function(){ // возврат в изначальное
$('.ball').removeClass('animate-1');
$('.stick').removeClass('animate-2');
},2000)
});
});
|
Цитата:
|
поставил $('.roulette-1 img') вместо $('.roulette-1 > img') и всё заработало
|
| Часовой пояс GMT +3, время: 15:16. |