prev / next按类隐藏和显示div

时间：2015-10-08 22:46:00

标签： javascript jquery html

我试图进入div，我创建了next和prev标签。我有两个包含一些div的div类。一次只能显示两个div，一个来自class:"divs1"，另一个来自class:divs2.这里是html代码：

<div class="divs1">
    <div class="test1 "> Show div 1 part 1</div>
    <div class="test1 "> Show div 2 part 1</div>
    <div class="test1 "> Show div 3 part 1</div>
    <div class="test1 "> Show div 4 part 1</div>
    <div class="test1 "> Show div 5 part 1</div>
    <div class="test1 "> Show div 6 part 1</div>
    <div class="test1 "> Show div 7 part 1</div>
</div>
<div class="divs2">
    <div class="test2 "> Show div 1 part 2</div>
    <div class="test2 "> Show div 2 part 2</div>
    <div class="test2 "> Show div 3 part 2</div>
    <div class="test2 "> Show div 4 part 2</div>
    <div class="test2 "> Show div 5 part 2</div>
    <div class="test2 "> Show div 6 part 2</div>
    <div class="test2 "> Show div 7 part 2</div>
</div>
<br/> 
<a id="next">next</a>
<a id="prev">prev</a>

我尝试这样做，但问题是当我尝试检查是否有div可见时。我的代码：

$(document).ready(function(){
    $(".divs1 .test1").each(function(e) {
        if (e != 0)
            $(this).hide();
    });
    $(".divs2 .test2").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".divs test:visible").next().length != 0 && $(".divs2 test2:visible").next().length !=0 ) 
            $(".divs1 test1:visible").next().show().prev().hide();
            $(".divs2 test2:visible").next().show().prev().hide();
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs test:visible").prev().length != 0 && $(".divs2 test2:visible").prev().length != 0)
            $(".divs1 test1:visible").prev().show().next().hide();
            $(".divs2 test2:visible").prev().show().next().hide();
        return false;
    });
});

Jsfiddle：DEMO 任何帮助:(

2 个答案:

答案 0 :(得分：0)

这应该有效。您可能希望添加函数以避免必须执行所有内容两次。

window.onload = function(){
  var divs1Active = document.getElementById('divs1Active');
  var divs2Active = document.getElementById('divs2Active');
  $('#next').click(function(){
    //see if there is another element after the divs1Active element before proceeding
    if(divs1Active.nextElementSibling){
      $(divs1Active).hide();
      $(divs2Active).hide();
      $(divs1Active).next().show();
      $(divs2Active).next().show();
      divs1Active.id = '';
      divs2Active.id = '';
      divs1Active.nextElementSibling.id = 'divs1Active';
      divs2Active.nextElementSibling.id = 'divs2Active';
      divs1Active = document.getElementById('divs1Active');
      divs2Active = document.getElementById('divs2Active');
    }
  });
  
  $('#prev').click(function(){
    //if there is a previous sibling to the divs1Active element
    if(divs1Active.previousElementSibling){
      $(divs1Active).hide();
      $(divs2Active).hide();
      $(divs1Active).prev().show();
      $(divs2Active).prev().show();
      divs1Active.id = '';
      divs2Active.id = '';
      divs1Active.previousElementSibling.id = 'divs1Active';
      divs2Active.previousElementSibling.id = 'divs2Active';
      divs1Active = document.getElementById('divs1Active');
      divs2Active = document.getElementById('divs2Active');
    }
  });
};
.test1{
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #B5B5B5;
    display:none;
}
.test2{
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #B5E2B5;
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divs1" id="divs1">
    <div class="test1 " style="display:block;" id="divs1Active"> Show div 1 part 1</div>
    <div class="test1 "> Show div 2 part 1</div>
    <div class="test1 "> Show div 3 part 1</div>
    <div class="test1 "> Show div 4 part 1</div>
    <div class="test1 "> Show div 5 part 1</div>
    <div class="test1 "> Show div 6 part 1</div>
    <div class="test1 "> Show div 7 part 1</div>
</div>
<div class="divs2" id="divs2">
    <div class="test2 " style="display:block;" id="divs2Active"> Show div 1 part 2</div>
    <div class="test2 "> Show div 2 part 2</div>
    <div class="test2 "> Show div 3 part 2</div>
    <div class="test2 "> Show div 4 part 2</div>
    <div class="test2 "> Show div 5 part 2</div>
    <div class="test2 "> Show div 6 part 2</div>
    <div class="test2 "> Show div 7 part 2</div>
</div>
<br/> 
<a href="#" id="next">next</a>
<a href="#" id="prev">prev</a>

答案 1 :(得分：0)

您的不满意结果可能会有一些可能的罪魁祸首。以前的评论对于将href="#"添加到a锚标记是正确的。

HTML无需另行更改，可以安全地保留如下：

<div class="divs1">
    <div class="test1"> Show div 1 part 1</div>
    <div class="test1"> Show div 2 part 1</div>
    <div class="test1"> Show div 3 part 1</div>
    <div class="test1"> Show div 4 part 1</div>
    <div class="test1"> Show div 5 part 1</div>
    <div class="test1"> Show div 6 part 1</div>
    <div class="test1"> Show div 7 part 1</div>
</div>
<div class="divs2">
    <div class="test2"> Show div 1 part 2</div>
    <div class="test2"> Show div 2 part 2</div>
    <div class="test2"> Show div 3 part 2</div>
    <div class="test2"> Show div 4 part 2</div>
    <div class="test2"> Show div 5 part 2</div>
    <div class="test2"> Show div 6 part 2</div>
    <div class="test2"> Show div 7 part 2</div>
</div>
<br/> 
<a id="next" href="#">Next</a>
<a id="prev" href="#">Prev</a>

CSS也无需更改。

Javascript可以使用一些调试和优化。例如，为避免调试困难，我建议始终使用显式阻止if语句。 例如：

if (condition)
    alert("A");
    alert("B");

导致只有"A"被提醒，而缩进表示"A"和"B"都会收到提醒。因此，在适当的代码周围添加{和}将提供您所寻求的结果，并使调试变得更加容易。即G：

if (condition) {
    alert("A");
    alert("B");
}

最后，我建议将$()调用的不变结果存储在局部变量中，以节省一些调用并使意图更清晰一些。总而言之，Javascript可能如此：

$(document).ready(function() {
    var part1divs = $(".divs1 .test1"),
        part2divs = $(".divs2 .test2"),

        next = $("#next"),
        prev = $("#prev"),

        visFilter = ":visible";

    function hideAllExceptFirst(index) {
        if (index > 0) {
            $(this).hide();
        }
    }

    part1divs.each(hideAllExceptFirst);
    part2divs.each(hideAllExceptFirst);

    next.click(function() {
        var div1vis = part1divs.filter(visFilter),
            div2vis = part2divs.filter(visFilter);

        if (div1vis.next().length > 0) {
            div1vis.next().show().prev().hide();
        }
        if (div2vis.next().length > 0) {
            div2vis.next().show().prev().hide();
        }

        return false;
    });

    prev.click(function() {
        var div1vis = part1divs.filter(visFilter),
            div2vis = part2divs.filter(visFilter);

        if (div1vis.prev().length > 0) {
            div1vis.prev().show().next().hide();
        }
        if (div2vis.prev().length > 0) {
            div2vis.prev().show().next().hide();
        }

        return false;
    });
});

这里是JSFiddle link。

相关问题
最新问题