Форум

Moloch · #1 (**permalink**) 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().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');

	});
		});

рони · #2 (**permalink**) 21.04.2015, 01:14

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>

Moloch · #3 (**permalink**) 21.04.2015, 19:47

благодарю

Форум

Справочник

Discord чат

Курсы javascript