jQuery присваивание переменной идентификатора
Здравствуйте. У меня, всего, 3 строки кода, но последняя не работает. Код для игры "сапёр" (в зачаточном состоянии). На данном этапе, генерируется случайное число в пределах количества ячеек -> присваивается переменной-> преобразуется в id-> которому присваивается класс bomb (желтый фон). Проблема в том, что фон не меняется (класс не присваивается).
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var dangerItem = "\"#" +Math.round(Math.random()*24)+"\"";
alert(dangerItem);//проверка содержания переменной
$(dangerItem).addClass("bomb");
});
</script>
<style>
.bomb{
background-color: yellow;
}
table{
width:300px;
height: 300px;
}
table, td{
border: 1px solid;
}
</style>
<table>
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
<td id="4"></td>
<td id="5"></td>
<td></td>
</tr>
<tr>
<td id="6"></td>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
<td id="10"></td>
<td id="11"></td>
</tr>
<tr>
<td id="12"></td>
<td id="13"></td>
<td id="14"></td>
<td id="15"></td>
<td id="16"></td>
<td id="17"></td>
</tr>
<tr>
<td id="19"></td>
<td id="20"></td>
<td id="21"></td>
<td id="22"></td>
<td id="23"></td>
<td id="24"></td>
</tr>
</table>
</body>
</html>
Еще, я пыталась привести переменную к строке, но это ничего не изменило.
$(document).ready(function(){
var randomItem = Math.round(Math.random()*24);
var dangerItem = "\"#" + randomItem.toString()+"\"";
alert(dangerItem);//проверка содержания переменной
$(dangerItem).addClass("bomb");
});
Если сделать так
$("#9").addClass("bomb");
то класс присваивается.Помогите, пожалуйста, найти ошибку. |
Blondinka,
var dangerItem = "#" +Math.round(Math.random()*24); |
Спасибо.
|
Blondinka, так правильнее
var dangerItem = "#" +Math.floor(1 + Math.random()*24); |
Цитата:
|
Иначе будет диапазон от 0 ...
|
Я тут развивала игру дальше. Попыталась рефракторить код (только JS), но теперь он не работает.
$(document).ready(function(){
var correctCounter = 0;
getDanger();
var getDanger = function(){
alert("hi");//Не работает.
for(var i = 0; i < 4; i++){
var danger+i = Math.round(1+Math.random()*24);
alert(danger2);//Не работает.
}
if(danger1===danger2||danger1===danger3||danger1===danger4||danger2===danger3||danger2===danger4||danger3===danger4){
getDanger();
}
}
var dangerItem1 = "#" + danger1;
var dangerItem2 = "#" + danger2;
var dangerItem3 = "#" + danger3;
var dangerItem4 = "#" + danger4;
$(dangerItem1+" ," +dangerItem2+" ," +dangerItem3+" ," +dangerItem4).addClass("bomb");//Присвоить класс bomb.
$("#" + (danger1+1)+" ," +"#" + (danger1-1)+" ," +"#" + (danger1+6)+" ," +"#" + (danger1-6)).addClass("nextToBomb");//Добавить предупреджающий класс (зелёный цвет) ближайшим соседям.
$("#" + (danger2+1)+" ," +"#" + (danger2-1)+" ," +"#" + (danger2+6)+" ," +"#" + (danger2-6)).addClass("nextToBomb");
$("#" + (danger3+1)+" ," +"#" + (danger3-1)+" ," +"#" + (danger3+6)+" ," +"#" + (danger3-6)).addClass("nextToBomb");
$("#" + (danger4+1)+" ," +"#" + (danger4-1)+" ," +"#" + (danger4+6)+" ," +"#" + (danger4-6)).addClass("nextToBomb");
$(".bomb").click(function(){
$(".bomb").css("background-color","yellow");//Если пользователь кликнул на ячейку с классом bomb, то все такие ячейки поодсветятся желтым
document.getElementById("result").innerHTML="Try again!";// и выведется текстовое сообщение.
$("td").not(".bomb").css("background-color","blue");//При клике по ячейке с классом bomb, все ячейки без этого класса становятся синими.
});
$("td").not(".bomb").click(function(){//Если пользователь кликнул на ячейку не с классом bomb, то такая ячейка подсветится синим
correctCounter++;
$(this).css("background-color","blue");
if(correctCounter === 20){alert("You win!");}//Если пользователь 20 раз выбрал правильную ячейку, то он победил.
document.getElementById("result").innerHTML="Go on!";//а сообщение будет, "продолжай"
});
});
Даже, если написать body onload="getDanger()"- не работает. Это происходит со всеми циклами:
for(var j = 0; j < 4; j++){
var dangerItem+j = "#" + danger+j;
}
А этот код https://github.com/VaAlina/saper/blob/master/index.html работает. Кто-нибудь подскажет, почему функция getDanger() и последний цикл не работают? |
Знаю. Не работает из-за динамического присваивания переменной.
var dangerItem+j = "#" + danger+j; Нужно использовать массив. |
Отрефракторила код. Надеюсь, меня не забанят за то, что общаюсь сама с собой, но мне этот код показался красивым, поэтому решила
$(document).ready(function(){
var correctCounter = 0;
var danger = [];
var dangerItem = [];
for(var j =0; j < 4; j++){
danger.push(Math.round(1+Math.random()*36));
dangerItem.push("#" + danger[j]);
$(dangerItem[j]).addClass("bomb");
$("#" + (danger[j]+1)+" ," +"#" + (danger[j]-1)+" ," +"#" + (danger[j]+6)+" ," +"#" + (danger[j]-6)).addClass("nextToBomb");
$("#" + (danger[j]+5)+" ," +"#" + (danger[j]-5)+" ," +"#" + (danger[j]+7)+" ," +"#" + (danger[j]-7)).addClass("nextToBomb");
}
$(".bomb").click(function(){
$(".bomb").css("background-color","yellow");
document.getElementById("result").innerHTML="Try again!";
$("td").not(".bomb").css("background-color","blue");
});
$("td").not(".bomb").click(function(){
correctCounter++;
$(this).css("background-color","blue");
if(correctCounter === 20){alert("You win!");}
document.getElementById("result").innerHTML="Go on!";
});
});
|
| Часовой пояс GMT +3, время: 03:53. |