[英]How do I change the color of a button so that it changes to another color when its clicked using jQuery?
I'm trying to change the color of a button whenever it's clicked to show that that is the current page being viewed. 我试图更改按钮的颜色,每当它被单击以显示那是正在查看的当前页面时。 I tried to code using jQuery but its not changing color when I click the button.
我尝试使用jQuery进行编码,但单击按钮时颜色不变。 Could someone help me with the jQuery code I need?
有人可以帮我处理我需要的jQuery代码吗? I'm not well versed with jQuery syntax.
我不太了解jQuery语法。
I tried css with jQuery, but button won't change color. 我尝试使用jQuery的CSS,但是按钮不会改变颜色。
PHP: 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: 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);
});
}); });
How do I fix this so the button changes color and not get removed when the ajax method reloads the data onto the page? 我该如何解决这个问题,以便当ajax方法将数据重新加载到页面上时,按钮会更改颜色并且不会被删除? I want the button to change color to show that is the current page being viewed.
我希望按钮更改颜色以显示正在查看的当前页面。 Any help would be much appreciated.
任何帮助将非常感激。
In your click event, you can do something like this. 在点击事件中,您可以执行以下操作。
$('.pagination_link').css({'background': ''}); // this removes the new color from all buttons
$(this).css({'background': '#00F'}); // this changes the background of the clicked button
You can add a class to the button when it is clicked, and make sure that your css file has a definition for it. 您可以在单击按钮时向按钮添加一个类,并确保您的css文件具有定义。 For example, imagine class "bgGreen" in css:
例如,想象一下CSS中的“ bgGreen”类:
.bgGreen{background-color:green;}
Assuming you have multiple buttons, you might first want to remove that class from all other .pagination_link
buttons before adding it to the button just clicked: 假设您有多个按钮,则可能首先要将该类从所有其他
.pagination_link
按钮中删除,然后再将其添加到刚刚单击的按钮中:
jQuery: 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>
If the page reloads, then you need to take a different approach. 如果页面重新加载,则您需要采取其他方法。 The big-picture idea is to check the current page name (url) and match that to one of the button IDs or classes.
总体思路是检查当前页面名称(URL),并将其与按钮ID或类之一进行匹配。 This might involve a bit of string manipulation, or you can intentionally make your
.php
page names match your ID or class names, which makes the job much easier. 这可能涉及一些字符串操作,或者您可以有意使您的
.php
页面名称与您的ID或类名称匹配,这使工作更加容易。
You can either do this in PHP at the top of the page, or in javascript/jQuery after the page has loaded. 您可以在页面顶部的PHP中执行此操作,也可以在页面加载后在javascript / jQuery中执行此操作。
Here's a PHP example that looks simple and effective 这是一个看起来简单有效的PHP示例
Here's a javascript/jQuery example 这是一个javascript / jQuery示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.