Question

每当单击按钮以显示那是当前正在查看的页面时，我都试图更改按钮的颜色。我尝试使用jQuery进行编码，但单击按钮时颜色不变。有人可以帮我处理我需要的jQuery代码吗？我不太了解jQuery语法。

我用jQuery尝试了CSS，但是按钮不会改变颜色。

PHP：

$output .= '<div id="myDIV" style="text-align:center;">';
for ($i = 1; $i <= $total_pages; $i++) {
  $output .= "<button class='pagination_link btn' id='".$i."'><a href='#'>".$i."</a></button>";
}
$output .= '</div>';
echo $output;

jQuery：

$(document).ready(function() {
load_data();
function load_data(page)
{
    $.ajax({
         url:'pagination.php',
         method:'POST',
         data:{page:page},
         success:function(data) {
               $('#pagination_data').html(data);
         }
     });
}
$(document).on('click','.pagination_link', function() {
        var page = $(this).attr("id");
        load_data(page);
 });

}）;

我该如何解决这个问题，以便当ajax方法将数据重新加载到页面上时，按钮会更改颜色并且不会被删除？我希望按钮更改颜色以显示正在查看的当前页面。任何帮助将不胜感激。

Answer 1

在点击事件中，您可以执行以下操作。

$('.pagination_link').css({'background': ''}); // this removes the new color from all buttons
$(this).css({'background': '#00F'}); // this changes the background of the clicked button

Answer 2

您可以在单击按钮时将一个类添加到按钮，并确保您的css文件具有定义。例如，想象一下CSS中的“ bgGreen”类：

.bgGreen{background-color:green;}

假设您有多个按钮，则可能需要先将其从所有其他.pagination_link按钮中删除，然后再将其添加到单击的按钮中：

jQuery：

$(document).on('click', '.pagination_link', function() {
    $('.pagination_link').removeClass('bgGreen'); //First remove from all buttons
    $(this).addClass('bgGreen'); //Then add it to THIS button
    var page = $(this).attr("id");
    load_data(page); 
});

演示：

$(document).on('click', '.pagination_link', function(){
   $('.pagination_link').removeClass('bgDarkCyan');
   $(this).addClass('bgDarkCyan');
});

.bgDarkCyan{background:darkcyan;color:white;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button id="btn1" class="pagination_link">Button One</button>
<button id="btn2" class="pagination_link">Button Two</button>
<button id="btn3" class="pagination_link">Button Three</button>

如果页面重新加载，那么您需要采取其他方法。总体思路是检查当前页面名称（URL），并将其与按钮ID或类之一进行匹配。 这可能涉及一些字符串操作，或者您可以有意使您的.php页面名称与您的ID或类名称匹配，这使工作更加容易。

您可以在页面顶部的PHP中执行此操作，也可以在页面加载后在javascript / jQuery中执行此操作。

Here's a PHP example that looks simple and effective

Here's a javascript/jQuery example

如何更改按钮的颜色，以便在使用jQuery单击按钮时将其更改为另一种颜色？

2 个答案:

演示：