CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user10179042
user10179042

Reputation: 37

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. Could someone help me with the jQuery code I need? I'm not well versed with jQuery syntax.

I tried css with jQuery, but button won't change color.

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);
 });

});

How do I fix this so the button changes color and not get removed when the ajax method reloads the data onto the page? I want the button to change color to show that is the current page being viewed. Any help would be much appreciated.

Upvotes: 0

Views: 147

Answers (2)

cssyphus
cssyphus

Reputation: 40106

You can add a class to the button when it is clicked, and make sure that your css file has a definition for it. For example, imagine class "bgGreen" in css:

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

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); 
});

DEMO:

$(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. 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.

You can either do this in PHP at the top of the page, or in javascript/jQuery after the page has loaded.

Here's a PHP example that looks simple and effective

Here's a javascript/jQuery example

Upvotes: 1

Nieminen
Nieminen

Reputation: 1284

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

Upvotes: 1

Related Questions