Форум

kcp_808 · #1 (**permalink**) 06.08.2015, 00:25

Здравствуйте, уважаемые. Я сам не очень силен в js, но возникла необходимость кое что сделать

<script>
$( document ).ready(function() {
	console.log( "ready!" );

	var crntnumL = 1;
	var crntnumR = 2;
	var r_href = ".list"+crntnumR+" .right"; //получаем класс кнопки для движения вправо вида .list1 .right
	var l_href = ".list"+crntnumL+" .left"; //тоже самое влево
	$(".list"+crntnumL).css("display","block"); //показываем первый блок с list1
	$(".list"+crntnumR).css("display","block"); //второй с list2
	$(r_href).click(function () //отслеживаем клик "вправо"
	{
		$(".list"+crntnumL).css("display","none"); //убираем первые два блока
		$(".list"+crntnumR).css("display","none");
		crntnumL = crntnumL+2; //прибавляем list чтобы показать следующие 2
		crntnumR = crntnumR+2;
		r_href = ".list"+crntnumR+" .right"; //меняем класс у кнопки (был .list2 .right, стал .list4 .right)
		l_href = ".list"+crntnumL+" .left"; //тоже самое с left
		$(".list"+crntnumL).css("display","block"); //показываем два новых блока
		$(".list"+crntnumR).css("display","block");
		console.log (r_href);
		
		
	});
	$(l_href).click(function ()
	{
		$(".list"+crntnumL).css("display","none");
		$(".list"+crntnumR).css("display","none");
		crntnumL = crntnumL-2;
		crntnumR = crntnumR-2;
		r_href = ".list"+crntnumR+" .right";
		l_href = ".list"+crntnumL+" .left";
		$(".list"+crntnumL).css("display","block");
		$(".list"+crntnumR).css("display","block");
		
	});
});
</script>

HTML код имеет следующую структуру:

Код:

<div class="list1">...
...
...
<div class="left"></div>
<div class="right"></div>
</div>
<div class="list2">...
...
...
<div class="left"></div>
<div class="right"></div>
</div>
<div class="list3">...
...
...
<div class="left"></div>
<div class="right"></div>
</div>

left и right кнопки для "перелистывания".
событие click срабатывает только первый раз и перелистывает одну страницу...последующие нажатия не работают. ткните куда смотреть плз...

Пример на fiddle https://jsfiddle.net/m4q3zf7y/

рони · #2 (**permalink**) 06.08.2015, 07:47

kcp_808,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .right{float:right;margin-top:20px;background:#F00;color:#FF3;padding:12px;border-radius:5px;cursor:pointer}
  .left{float:left;margin-top:20px;background:#00F;color:#FF3;padding:12px;border-radius:5px;cursor:pointer}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function() {
    var b = $(".right"),
        c = $(".left");
    b.add(c).on("click", function() {
        var a = $(this).is(".right"),
            a = a ? b.index(this) + 1 : c.index(this) - 1;
        0 > a && (a = b.length - 1);
        a > b.length - 1 && (a = 0);
        b.hide().eq(a).show();
        c.hide().eq(a).show()
    }).end().last().click()
});  
</script>
</head>

<body> <div class="list1">
    <div class="left">л1</div>
</div>
<div class="list2">
    <div class="right">п2</div>
</div>
<div class="list3">
    <div class="left">л3</div>
</div>
<div class="list4">
    <div class="right">п4</div>
</div>
<div class="list5">
    <div class="left">л5</div>
</div>
<div class="list6">
    <div class="right">п6</div>
</div>


</body>

</html>

рони · #3 (**permalink**) 06.08.2015, 08:10

kcp_808,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .right{float:right;margin-top:20px;background:#F00;color:#FF3;padding:12px;border-radius:5px;cursor:pointer}
  .left{float:left;margin-top:20px;background:#00F;color:#FF3;padding:12px;border-radius:5px;cursor:pointer}
  .no{
    opacity: 0.2;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function() {
    var b = $(".right"),
        c = $(".left");
    b.add(c).on("click", function() {
        var a = $(this).is(".right"),
            a = a ? b.index(this) + 1 : c.index(this) - 1;
        0 > a && (a = 0);
        a > b.length - 1 && (a = b.length - 1);
        b.hide().toggleClass("no", a == b.length - 1).eq(a).show();
        c.hide().toggleClass("no", !a).eq(a).show()
    }).end().last().click()
});
  </script>
</head>

<body> <div class="list1">
    <div class="left">л1</div>
</div>
<div class="list2">
    <div class="right">п2</div>
</div>
<div class="list3">
    <div class="left">л3</div>
</div>
<div class="list4">
    <div class="right">п4</div>
</div>
<div class="list5">
    <div class="left">л5</div>
</div>
<div class="list6">
    <div class="right">п6</div>
</div>


</body>

</html>

join · #4 (**permalink**) 06.08.2015, 10:15

рони,
если кол-во будет не четное, то один див потеряется. list7, list9

рони · #5 (**permalink**) 06.08.2015, 11:04

join,
... тогда бы бабушка, была бы дедушкой

Форум

Справочник

Discord чат

Курсы javascript