Question

我有以下jQuery代码，您也可以在JSfiddle here中找到：

/* Code for buttons individually */
$(document).ready(function() {
  $(".panel_button").on('click', function() {
    $(".panel").hide();
    var targetPanel = $(this).attr('data-target');
     $(targetPanel).show();
    $(this).toggleClass('active');
  });
});


/* Code for previous and next buttons */
$(document).ready(function(){
    $(".panel").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".panel:visible").next().length != 0)
            $(".panel:visible").next().show().prev().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".panel:visible").prev().length != 0)
            $(".panel:visible").prev().show().next().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:last").show();
        }
        return false;
    });
});

body {
  height: 500px;
}

.contents {
  width: 100%;
  height: 20%;
}

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button {
  float: left;
  width: 20%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

#panel1, #panel2, #panel3 {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents">

  <div id="panel1" class="panel">
    <div class="content_01a">Here goes content1a</div>
    <div class="content_01b">Here goes content1b</div>
  </div>

  <div id="panel2" class="panel">
    <div class="content_02a">Here goes content2a</div>
    <div class="content_02b">Here goes content2b</div>
    <div class="content_02c">Here goes content2c</div>
  </div>

  <div id="panel3" class="panel">
    <div class="content_03a">Here goes content3a</div>
    <div class="content_03b">Here goes content3b</div>
  </div>

</div>

<div class="buttons">
  
  <div class="panel_button" data-target="#panel1"> PREVIOUS </div>

  <div class="panel_button" data-target="#panel1"> Button_01 </div>
  <div class="panel_button" data-target="#panel2"> Button_02 </div>
  <div class="panel_button" data-target="#panel3"> Button_03 </div>
  
  <div class="panel_button" data-target="#panel1"> NEXT </div>
  
</div>

如您在上面的代码中所看到的，我根据单击哪个contents来显示/隐藏不同的button。 button_01到button_03可以完美运行。

现在，我想使用here中的代码添加一个prev和next按钮，但是我无法使其工作。
您是否知道我需要在jQuery中的第二个代码中进行哪些更改才能使prev和next按钮起作用？

Answer 1

您尚未更新下一个/上一个按钮以使用更新后的代码，请更改：

<div class="panel_button" data-target="#panel1"> PREVIOUS </div>

到

<div id="prev"> PREVIOUS </div>

/* Code for buttons individually */
$(document).ready(function() {
  $(".panel_button").on('click', function() {
    $(".panel").hide();
    var targetPanel = $(this).attr('data-target');
     $(targetPanel).show();
    $(this).toggleClass('active');
  });
});


/* Code for previous and next buttons */
$(document).ready(function(){
    $(".panel").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".panel:visible").next().length != 0)
            $(".panel:visible").next().show().prev().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".panel:visible").prev().length != 0)
            $(".panel:visible").prev().show().next().hide();
        else {
            $(".panel:visible").hide();
            $(".panel:last").show();
        }
        return false;
    });
});

body {
  height: 500px;
}

.contents {
  width: 100%;
  height: 20%;
}

.buttons {
  background-color: green;
  float: left;
  width: 100%;
}

.panel_button {
  float: left;
  width: 20%;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

#panel1, #panel2, #panel3 {
  background-color: blue;
  float: left;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents">

  <div id="panel1" class="panel">
    <div class="content_01a">Here goes content1a</div>
    <div class="content_01b">Here goes content1b</div>
  </div>

  <div id="panel2" class="panel">
    <div class="content_02a">Here goes content2a</div>
    <div class="content_02b">Here goes content2b</div>
    <div class="content_02c">Here goes content2c</div>
  </div>

  <div id="panel3" class="panel">
    <div class="content_03a">Here goes content3a</div>
    <div class="content_03b">Here goes content3b</div>
  </div>

</div>

<div class="buttons">
  
  <div id="prev"> PREVIOUS </div>

  <div class="panel_button" data-target="#panel1"> Button_01 </div>
  <div class="panel_button" data-target="#panel2"> Button_02 </div>
  <div class="panel_button" data-target="#panel3"> Button_03 </div>
  
  <div id="next"> NEXT </div>
  
</div>

Answer 2

所以问题是您缺少如上所述的“下一个”和“上一个”按钮的ID。但是，您不需要仅附加类。您仍然可以在“上一个”和“下一个”按钮上使用“ .panel_button”类。这样就没有添加额外的CSS。

那么您只需考虑事件传播。

  $(".buttons").on('click', '.panel_button', function() {
    $(".panel").hide();
    var targetPanel = $(this).attr('data-target');
    $(targetPanel).show();
    $(this).toggleClass('active');
  });

检查小提琴： https://jsfiddle.net/golala/Lmzrhk4u/

我仅更改了您处理“ .panel_button”点击事件的方式。这是因为您的按钮具有相同的类，并且如果您有panel_button click事件，那么您也将执行此事件（在单击后执行＃next /＃prev之后）。这给了您不必要的行为。

为防止这种情况，您只想在其父项（.buttons）上实现on click方法。这样，您将通过“ return false”停止事件冒泡，并且在单击事件的＃next /＃prev之后将永远不会执行上述方法。

PS：在这种情况下，您不一定需要“返回false”，因为您只想停止传播。您可以添加“ e.stopPropagation（）;”而不是“返回假”。

这听起来很复杂，但我建议您阅读有关“事件冒泡”和“返回假”的声明。然后，您将更好地理解整个问题。

使用上一个/下一个按钮显示/隐藏内容

2 个答案: