Moloch
20.04.2015, 23:39
Здравствуйте, подскажите пожалуйста как решить такую задачу. есть элемент range, 2 списка - в первом слово, dj втором описание к нему. Также в низу есть 2 кнопки: вперед и назад. при изменении положения ползуна должны поочередно менять background элементы списка. При клике на элемент списка со словом, должно меняться положение ползуна. При клике на кнопку "вперед" , должен поменяться бэкграунд у следующего элемента списка. Как связать работу этих трех элементов (ползуна, списка и кнопки) чтобы они работали синхронно. Может быть не стоило делать последовательное выполнение событий при наступлении одного из них?
<input id='polzun'type="range" name="quantity">
<h3>Определение</h3>
<ul id ="spisok">
<li >Строители</li>
<li >Слон</li>
<li >Соседи</li>
<li >Рояль</li>
<li >Рукокрылая свинья</li>
</ul>
<h3>Пояснение</h3>
<ul id ="opredelenie">
<li> <span>Курили бетон</span> </li>
<li ><span>Сильный он</span></li>
<li ><span>Клопы и медведи</span></li>
<li ><span>Украли через форточку</span></li>
<li ><span>Уселась на жордочку</span></li>
</ul>
<button id="prev">Назад</button>
<button id="next">Вперед</button>
$(function() {
/************************************************** ******/
$("#polzun").attr('max',$('#spisok li').length-1);
$("#polzun").attr('min','0');
$("#polzun").val('0');
var spisok = $('#spisok li');
var opredelenie = $('#opredelenie li');
var length = $('#spisok li').length;
var index =0;
var buf=0;
$("#polzun").on('change',function(){
var z=$(this).val();
spisok.eq(z).addClass('colorli').siblings().remove Class('colorli');
index =z;
opredelenie.eq(z).show().siblings().hide();
})
.trigger('change');
/************************************************** **/
$('#spisok').on('click.spisok','li',function(){
if ($(this).hasClass('clicked')){
buf = index;
}
else {
buf= spisok.index( this );
}
$(this).toggleClass('clicked');
//console.log(index);
$("#polzun")
.val(buf)
.trigger('change');
});
/************************************************** *************************/
$('#next').on('click.button', function(){
if (index <(length-1) ) {
index++;
}
else {
index=0;
}
//spisok.eq(index).toggleClass('clicked');
console.log(index);
spisok .next().trigger('click.spisok');
});
});
<input id='polzun'type="range" name="quantity">
<h3>Определение</h3>
<ul id ="spisok">
<li >Строители</li>
<li >Слон</li>
<li >Соседи</li>
<li >Рояль</li>
<li >Рукокрылая свинья</li>
</ul>
<h3>Пояснение</h3>
<ul id ="opredelenie">
<li> <span>Курили бетон</span> </li>
<li ><span>Сильный он</span></li>
<li ><span>Клопы и медведи</span></li>
<li ><span>Украли через форточку</span></li>
<li ><span>Уселась на жордочку</span></li>
</ul>
<button id="prev">Назад</button>
<button id="next">Вперед</button>
$(function() {
/************************************************** ******/
$("#polzun").attr('max',$('#spisok li').length-1);
$("#polzun").attr('min','0');
$("#polzun").val('0');
var spisok = $('#spisok li');
var opredelenie = $('#opredelenie li');
var length = $('#spisok li').length;
var index =0;
var buf=0;
$("#polzun").on('change',function(){
var z=$(this).val();
spisok.eq(z).addClass('colorli').siblings().remove Class('colorli');
index =z;
opredelenie.eq(z).show().siblings().hide();
})
.trigger('change');
/************************************************** **/
$('#spisok').on('click.spisok','li',function(){
if ($(this).hasClass('clicked')){
buf = index;
}
else {
buf= spisok.index( this );
}
$(this).toggleClass('clicked');
//console.log(index);
$("#polzun")
.val(buf)
.trigger('change');
});
/************************************************** *************************/
$('#next').on('click.button', function(){
if (index <(length-1) ) {
index++;
}
else {
index=0;
}
//spisok.eq(index).toggleClass('clicked');
console.log(index);
spisok .next().trigger('click.spisok');
});
});