0

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

/* 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单独工作完美。

现在，我想使用此处prev的代码添加一个和按钮，但我无法使其工作。您知道我需要在第二个代码中更改什么以使和按钮工作吗？next
jQueryprevnext

4

2 回答 2

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>

于 2018-11-21T11:50:58.350 回答
0

所以问题是你错过了 'next' 和 'prev' 按钮的 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/golara/Lmzrhk4u/

我只是改变了你处理'.panel_button'的点击事件的方式。这是因为您的按钮具有相同的类，并且如果您有 panel_button 单击事件，您也将执行此事件（在您执行 #next/#prev on click 之后）。这会给你带来不想要的行为。

为了防止这种情况，您只想在其父级 (.buttons) 上实现 on click 方法。这样，您将使用“return false”停止事件冒泡，并且您将永远不会在点击事件的#next/#prev 之后执行上述方法。

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

这听起来可能很复杂，但我建议您阅读有关“事件冒泡”和“返回错误”的声明。你会更好地理解整个问题。

于 2018-11-21T14:25:52.237 回答