时间戳

首页 > 解决方案 > jquery increase number if next prev is clicked

jquery - jquery increase number if next prev is clicked

问题描述

I'm trying to increase number if next - prev button is clicked. I have four elements, and if I pass on the second element, number should change from 1 to 2, and so on.

enter image description here

My html code is: 

        <div class="tl-mask">


        <div class="tl-container">

            <div class="tl-event"></div>
            <div class="tl-event"></div>
            <div class="tl-event"></div>
            <div class="tl-event"></div>
            <div class="tl-event"></div>
            <div class="tl-event"></div>
            <div class="tl-event"></div>
            <div class="tl-event"></div>
            <div class="tl-event"></div>
            <div class="tl-event"></div>
            <div class="tl-event"></div>
            <div class="tl-event"></div>
            <div class="tl-event"></div>
            <div class="tl-event"></div>
            <div class="tl-event"></div>
            <div class="tl-event"></div>
            <div class="tl-event"></div>


        </div> <!-- end .tl-container -->

    </div> <!-- end -tl-mask -->
     <button id="prev">prev</button>
     <div class="numbers"></div>
     <button id="next">next</button>

Also, even when I click on Element 2, the number should change to 2

标签： jqueryhtmlcss

解决方案

只要我有你的问题。你想使用下一个和上一个来实现分页。如果是这样，下面的代码将对您有所帮助。 

$(function() {
  var current = $(".numbers").text();
  $(".prev").on("click", function() {
    current = current - 1;
    $(".numbers").text(current);
  });

  $(".next").on("click", function() {
    current = parseInt(current) + parseInt(1);
    $(".numbers").text(current);
  });

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
  <div>Element 4</div>
</div>

<div class="arrows">
  <div class="prev">Prev</div>
  <div class="numbers">1</div>
  <div class="next">Next</div>
</div>
但是你的这句话I have four elements, and if I pass on the second element, number should change from 1 to 2, and so on让我想了一秒钟。如果单击任何元素，您还想更改数字。如果是这样，请参阅下面的代码

$(function() {
  var current = $(".numbers").text();
  $(".element").on("click",function(){
$(".numbers").text($(this).attr("id"));
current = $(this).attr("id");
})
  $(".prev").on("click", function() {
    current = current - 1;
    $(".numbers").text(current);
  });

  $(".next").on("click", function() {
    current = parseInt(current) + parseInt(1);
    $(".numbers").text(current);
  });

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements">
  <div id="1" class="element">Element 1</div>
  <div id="2" class="element">Element 2</div>
  <div id="3" class="element">Element 3</div>
  <div id="4" class="element">Element 4</div>
</div>

<div class="arrows">
  <div class="prev">Prev</div>
  <div class="numbers">1</div>
  <div class="next">Next</div>
</div>
注意：我更改了您的 html 中的一些代码以实现您想要的。希望这可以帮助你..可能有更好的解决方案，但这是我想出的。

推荐阅读