如果单击下一个上一个，则jQuery增加数量

Question

如果下一个-上一页按钮被点击，我正在尝试增加数字。我有四个元素，如果我传递第二个元素，数字应该从1更改为2，依此类推。

我的html代码是：

        <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>

此外，即使单击元素2，该数字也应更改为2

Answer 1

只要我有问题，您就可以使用next和prev实现分页。如果是这样，下面的代码将为您提供帮助。

$(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中的一些代码，以实现所需的代码。 希望这可以对您有所帮助。可能会有更好的解决方案，但这是我想出的。