ползун range
Здравствуйте, подскажите пожалуйста как решить такую задачу. есть элемент 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().removeClass('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');
});
});
|
Зависимые ползунок и список
Moloch,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.clicked {
display: inline-block;
background-image: -webkit-gradient(linear, left, right, color-stop(0, #5CC3FF), color-stop(1, #0060BF));
background-image: -o-linear-gradient(left, #5CC3FF, #0060BF);
background-image: -moz-linear-gradient(left, #5CC3FF, #0060BF);
background-image: -webkit-linear-gradient(left, #5CC3FF, #0060BF);
background-image: linear-gradient(to right, #5CC3FF, #0060BF)
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var spisok = $("#spisok li");
var opredelenie = $("#opredelenie li");
var length = spisok.length;
var polzun = $("#polzun");
var index = 0;
polzun.attr({
"max": length - 1,
"min": 0
}).val(index);
function show() {
spisok.removeClass("clicked").eq(index).addClass("clicked");
opredelenie.hide().eq(index).show();
polzun.val(index)
}
polzun.on("change", function() {
index = $(this).val();
show()
}).trigger("change");
spisok.on("click", function() {
index = spisok.index(this);
show()
});
$("#next, #prev").on("click", function() {
this.id == "prev" ? index-- : index++;
index == length && (index = 0);
index < 0 && (index = length - 1);
show()
})
});
</script>
</head>
<body>
<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>
</body>
</html>
|
благодарю
|
| Часовой пояс GMT +3, время: 16:13. |