Доброго времени суток!
Стоит следующая ситуация. На странице стоит несколько
<select> по клику на кнопку заношу их значения в переменные JS и подгружаю ajax контент. Но после этого, эти переменные уже не доступны, т.е. не определены.
Прочитал что такое же и с функциями, но проблема решается через использования метода .on(). А как быть с переменными, неужели передавать их на сервер в скрытых
<input> , а потом обратно?
Вот код файла:
<div id="content" class="container">
<div class="row">
<div class="input-group input-group-lg">
<span class="input-group-addon">Колличество команд</span>
<select id="number-of-teams" class="form-control">
<option value="1" >1</option>
<option selected value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<div class="row">
<div class="input-group input-group-lg">
<span class="input-group-addon">Колличество раундов</span>
<select id="number-of-rounds" class="form-control">
<option value="1" >1</option>
<option selected value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<div class="row">
<div class="input-group input-group-lg">
<span class="input-group-addon">Время на ответ</span>
<select id="timetosolve" class="form-control">
<option selected value="60" >1 минута</option>
<option value="90">1,5 минуты</option>
<option value="120">2 минуты </option>
<option value="150">2,5 минуты</option>
<option value="180">3 минты</option>
</select>
</div>
</div>
<div class="row text-center">
<button id="play-btn" type="button" class="btn btn-success">Играть!</button>
</div>
</div>
<script>
$(document).ready(function(){
var timeToSolve=10, // время на отгадывание слова
numberOfTeams, //колличесвто команд
numberOfRounds, //колличество раундов
teams = []; //массив для хранения счета команд
/*--Клик по кнопке играть--*/
$("body").on("click","#play-btn", function(){
timeToSolve = $("#timetosolve").val();
numberOfTeams = $("#number-of-teams").val();
numberOfRounds = $("#number-of-rounds").val();
$("#content").load("for_start.php");
/*создаем массив с колличеством элементов,соответствующему числу команд*/
for(var i=0;i++;i<numberOfTeams){
teams[i]=0;
}
});
});
<script>
Вот код подгружаемого файла:
<div class="progress">
<div id="timebar" class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" >
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="row text-center word">
<p class="h1 text-uppercase" id="word_container"></p>
</div>
<div id="ajaxOut">
</div>
<div class=" text-center" >
<button id="next-word" type="button" class="btn btn-primary" >Кнопка</button>
</div>
</div>
<script>
$(document).ready(function(){
function loadWord(){
/*Timer*/
var timeLeft=0; //прошло времени
var timer = setInterval(function() {
timeLeft+=100/10/timeToSolve;
$("#timebar").css({ 'width': 100-timeLeft+'%'});
if(timeLeft>=100){
clearInterval(timer);
$('#myModal').modal('show');
$("#timebar").css({ 'width': '100%'});
}
}
, 100);
$("#word_container").load("rand_word.php");
}
loadWord();
});
</script>
И после подгрузки переменная timeToSolve не определена.
