Php 用于具有不同Id的多按钮事件的JQuery函数

下面的代码创建多页按钮。

<?php
for($i=1; $i<=$this->total_pages; $i++)
{
  echo "<button class='btn page' id='next".$i."' value='".$i."'>".$i."</button>";
}
?>

<script>
    $( document ).ready(function() {
     $('button[id^="next"]').on('click', function() {
        var page = ($(this).attr('value'));
        $.ajax({
          type: "GET",
          url: 'index.php?act=product',
          data: ({page:page}),
          success: function(data) {
            var my_rows = $(data).find('tbody').html();
            $('tbody').append(my_rows);
          }
        });
        $(this).hide();
     });
    });
</script>

在下面的代码中，我只想捕获由用户触发的id值。我不知道id名称。

<?php
for($i=1; $i<=$this->total_pages; $i++)
{
  echo "<button class='btn page' id='next".$i."' value='".$i."'>".$i."</button>";
}
?>

<script>
    $( document ).ready(function() {
     $('button[id^="next"]').on('click', function() {
        var page = ($(this).attr('value'));
        $.ajax({
          type: "GET",
          url: 'index.php?act=product',
          data: ({page:page}),
          success: function(data) {
            var my_rows = $(data).find('tbody').html();
            $('tbody').append(my_rows);
          }
        });
        $(this).hide();
     });
    });
</script>

$（文档）.ready（函数（）{
$（'button[id^=“next”]”）。在（'click'，function（）上{
var page=（$（this.attr（'value'））；
$.ajax({
键入：“获取”，
url:'index.php？act=product'，
数据：（{page:page}），
成功：功能（数据）{
var my_rows=$（data.find（'tbody'）.html（）；
$（'tbody'）.append（我的行）；
}
});
$（this.hide（）；
});
});

我的问题是，为什么我的脚本在单击任何页面后追加行错误。当我点击2时，它会追加10行。然后我点击3，它会追加6行，然后我点击4，它会追加1行。为什么?

我的控制器页面位于下方

<?php
include "model/login_class.php";
include "view/template/product_class.php";
$tplLogin=new LoginTpl();
$sqlLogin=new sqlLogin();
//echo $_GET['page']; exit;
$total_results = $sqlLogin->totalproduct();
$per_page = 5;
$total_pages = ceil($total_results / $per_page);
$tplLogin->total_pages = $total_pages;
if (isset($_GET['page'])) {
    $show_page = $_GET['page']; //current page
    if ($show_page > 0 && $show_page <= $total_pages) {
        $start = ($show_page - 1) * $per_page;
        $end = $start + $per_page;
    } else {
        // error - show first set of results
        $start = 0;              
        $end = $per_page;
    }
} else {
    // if page isn't set, show first set of results
    $start = 0;
    $end = $per_page;
}
// display pagination
$sqlLogin->start = $start;
$sqlLogin->end = $end;
$tplLogin->products = $sqlLogin->product();
$tplLogin->product();
?>

---

另一种简单的方法是使用javascript
onclick
事件

echo "<button class='btn page' id='next".$i."' value='".$i."' 
onclick='renderPage(".$i.")' >".$i."</button>";

echo“$i”；

将ajax代码放入JS中，就像

<script>
   function renderPage(value){
   ...
   }
</script>


函数呈现页面（值）{
...
}

不需要知道id，为按钮使用单独的类

试试这个

$('button.page').on('click', function() {
/*your class */
        var page = $(this).attr('value');
        $.ajax({
          type: "GET",
          url: 'index.php?act=product',
          data: {page:page},
          success: function(data) {
            var my_rows = $(data).find('tbody').html();
            $('tbody').append(my_rows);
          }
        });
        $("button.page").show();
        $(this).hide();
     });

我希望这将对您有所帮助：）
另一种对具有不同id的多个按钮执行任何操作的简单方法是，对所有按钮使用一个通用类名（“.page”），并在JS中对单击事件使用该类名

以下是示例HTML和JS代码：

<button class='btn page' id='next1' value='1'>1</button>
<button class='btn page' id='next2' value='2'>2</button>
<button class='btn page' id='next3' value='3'>3</button>

  $(document).ready(function() {
     $('.page').on('click', function() {
       alert($(this).val());//Getting value for clicked button
       alert($(this).attr("id"));//Getting id for clicked button

       $.ajax({
         ...//Ajax call
       });
       $('this').hide();/Hiding clicked button
    });
  });

1
2.
3.
$（文档）.ready（函数（）{
$（'.page'）。在（'click'，function（）上{
警报（$（this.val（））；//获取单击按钮的值
警报（$（this.attr（“id”）；//获取所单击按钮的id
$.ajax({
…//Ajax调用
});
$（'this'）.hide（）；/单击隐藏按钮
});
});
第15行错误。

1 2 3 4 5 6 ........//I dont know how many pages

<?php
    include "model/login_class.php";
    include "view/template/product_class.php";
    $tplLogin=new LoginTpl();
    $sqlLogin=new sqlLogin();
    //echo $_GET['page']; exit;
    $total_results = $sqlLogin->totalproduct();
    $per_page = 5;
    $total_pages = ceil($total_results / $per_page);
    $tplLogin->total_pages = $total_pages;
    if (isset($_GET['page'])) {
        $show_page = $_GET['page']; //current page
        if ($show_page > 0 && $show_page <= $total_pages) {
            $start = ($show_page - 1) * $per_page;
            $end = $per_page;
        } else {
            // error - show first set of results
            $start = 0;              
            $end = $per_page;
        }
    } else {
        // if page isn't set, show first set of results
        $start = 0;
        $end = $per_page;
    }
    // display pagination
    $sqlLogin->start = $start;
    $sqlLogin->end = $end;
    $tplLogin->products = $sqlLogin->product();
    $tplLogin->product();
    ?>

所以发生了什么我看到的唯一问题是退出-为什么它会出现
$（'button[id^=“next”]”）。hide（）-应该是
$（this）.hide（）
从数据部分数据中删除括号：（{page:page}），嗨，阿伦，为什么我的脚本会附加所有行，即使我只点击了第2页。@Amit这在我这边起作用了（：&你需要获取id？它在我这边工作。我使用的代码是2.1.3/jquery.min.js版本。你能告诉我你使用的是哪个版本的jquery吗？嗨，阿米特，你能告诉我你想要的js代码的确切输出是什么吗？我的意思是，就像你正在尝试做的和即将得到的输出一样。嗨，阿克谢你的帮助。我发布了我的答案。c见鬼。我给了你很好的帮助和关心的声誉。非常感谢。嘿，Akshay在我15岁的声誉之后，它将被添加到你的帐户Stackoverflow说。我否决了它。你应该在你的代码中附加事件，而不是在你的HTML中（即使用
onclick
属性）。我可以知道你的优先顺序吗？@JustinJohnson