Не срабатывает click второй раз
Здравствуйте, уважаемые. Я сам не очень силен в 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">...событие click срабатывает только первый раз и перелистывает одну страницу...последующие нажатия не работают. ткните куда смотреть плз... Пример на fiddle https://jsfiddle.net/m4q3zf7y/ |
карусель листалка
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>
|
листалка без loop
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>
|
рони,
если кол-во будет не четное, то один див потеряется. list7, list9 |
join,
... тогда бы бабушка, была бы дедушкой :write: |
| Часовой пояс GMT +3, время: 14:13. |