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

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

您可以在单击按钮时向该按钮添加一个类，并确保您的 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