Implementing buttons using css and jQuery-CodePudding

I'm a complete beginner.

I'm trying to implement two buttons that change colors (green to blue) with one click (and once the implementation is completed, integrating it to the actual website).

The buttons need to do the following:

Both the buttons are initially green. Once a button is clicked, it should change its color to blue.
And after that same button is clicked the second time, it should revert back to its original color which is green.
Only one button out of the two can be blue at a time. Which means as soon as the user clicks button-2 after clicking button-1, the button-1 should turn back to green, and button-2 to blue.

So far, I can implement the first and third ones, but not the middle one.

Here are the necessary codes for it:

$(document).ready(function () {

    $('#btn1').click(function(){
        $('.btn').css('background-color', 'green');
        $(this).css('background-color', 'blue');

    })

    $('#btn2').click(function(){
        $('.btn').css('background-color', 'green');
        $(this).css('background-color', 'blue');
    })

  
});

.btn {
    background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/styles.css">

    <title>Document</title>
</head>
<body>
    <button id = "btn1" class = "btn">Button</button>
    <button id = "btn2" class = "btn">Button</button>
    <!--<button id = "btn3" class = "btn" onclick="changeColor()">Button</button>
    <button id = "btn4" class = "btn" onclick="changeColor()">Button</button> -->
    <script src="/jquery-3.6.1.min.js"></script>
    <script src="/index.js"></script>
</body>

</html>

CodePudding user response：

To do what you require you can toggle a class on the clicked element which sets its background to blue. At the same time this class will be removed from all other buttons.

The code can also be simplified by using a single event handler bound to all .btn elements, instead of separate ones for each id.

jQuery($ => {
  let $btns = $('.btn').on('click', e => {
    let $btn = $(e.target).toggleClass('clicked');
    $btns.not($btn).removeClass('clicked');
  });
});

.btn {
  background-color: green;
}

.btn.clicked {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button >Button</button>
<button >Button</button>

CodePudding user response：

Rory's answer is probably the best, but I think this one is more easy to understand for a beginner (although less elegant):

$('.btn').click(function(){
  if ($(this).hasClass('clicked')) {$(this).removeClass('clicked');}
  else {$('.btn').removeClass('clicked'); $(this).addClass('clicked');}
});

.btn {
  background-color: green;
}

.clicked {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <button >Button</button>
    <button >Button</button>