Using the Same jQuery Function in Separate Buttons-CodePudding

I'm trying to get each button to change color on click. However, I want to separate buttons 1-3 from buttons 4-6 so they are independent from each other. I want to be able to click buttons 1-3 and they change color without affecting 4-6 and vice versa. My code is attached. I'm sure this is very simple but my feeble mind can't figure it out :-) Any suggestions?

$(document).ready(function(){
  $("button").click(function() {
    $(".featuredBtn.active").removeClass("active");
    $(this).addClass("active");
  });
});

$(document).ready(function(){
  $("button").click(function() {
    $(".featuredBtn2.active").removeClass("active");
    $(this).addClass("active");
  });
});

.featuredBtn.active,
.featuredBtn2.active {
    background-color: #bf9471;
    color: white;
  }

  .featuredBtn,
  .featuredBtn2 {
    width: 250px;
    height: 50px;
    color: #8c8c8c;
    font-weight: 700;
    background-color: #f4efeb;
    border: none;
    letter-spacing: 2px;
    outline: none;
  }

  .row {
    margin-bottom: 40px;
  }

<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="test.js"></script>
    <link rel="stylesheet" href="test.css">
</head>
<body>

    <div >
        <div  style="text-align: center;">
          <button type="button"  id="btnOne">BUTTON ONE</button>
          <button type="button"  id="btnTwo">BUTTON TWO</button>
          <button type="button"  id="btnThree">BUTTON THREE</button>
        </div>
    </div>

    <div >
        <div  style="text-align: center;">
          <button type="button"  id="btnFour">BUTTON FOUR</button>
          <button type="button"  id="btnFive">BUTTON FIVE</button>
          <button type="button"  id="btnSix">BUTTON SIX</button>
        </div>
    </div>

</body>
</html>

CodePudding user response：

Instead of applying both handlers to all instances of $('button'), specifically target the instances you want. Your current markup separates them by class, so you can use $(".featuredBtn") and $(".featuredBtn2") to identify those elements:

$(document).ready(function(){
  $(".featuredBtn").click(function() {
    $(".featuredBtn.active").removeClass("active");
    $(this).addClass("active");
  });
});

$(document).ready(function(){
  $(".featuredBtn2").click(function() {
    $(".featuredBtn2.active").removeClass("active");
    $(this).addClass("active");
  });
});

.featuredBtn.active,
.featuredBtn2.active {
    background-color: #bf9471;
    color: white;
  }

  .featuredBtn,
  .featuredBtn2 {
    width: 250px;
    height: 50px;
    color: #8c8c8c;
    font-weight: 700;
    background-color: #f4efeb;
    border: none;
    letter-spacing: 2px;
    outline: none;
  }

  .row {
    margin-bottom: 40px;
  }

<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="test.js"></script>
    <link rel="stylesheet" href="test.css">
</head>
<body>

    <div >
        <div  style="text-align: center;">
          <button type="button"  id="btnOne">BUTTON ONE</button>
          <button type="button"  id="btnTwo">BUTTON TWO</button>
          <button type="button"  id="btnThree">BUTTON THREE</button>
        </div>
    </div>

    <div >
        <div  style="text-align: center;">
          <button type="button"  id="btnFour">BUTTON FOUR</button>
          <button type="button"  id="btnFive">BUTTON FIVE</button>
          <button type="button"  id="btnSix">BUTTON SIX</button>
        </div>
    </div>

</body>
</html>

CodePudding user response：

Simple, just use the classes that you have already supplied in the selector.

Also, note that you only need one ready handler, not two.

$(document).ready(function(){
  $("button.featuredBtn").click(function() {
    $(".featuredBtn.active").removeClass("active");
    $(this).addClass("active");
  });

  $("button.featuredBtn2").click(function() {
    $(".featuredBtn2.active").removeClass("active");
    $(this).addClass("active");
  });
});

.featuredBtn.active,
.featuredBtn2.active {
    background-color: #bf9471;
    color: white;
  }

  .featuredBtn,
  .featuredBtn2 {
    width: 250px;
    height: 50px;
    color: #8c8c8c;
    font-weight: 700;
    background-color: #f4efeb;
    border: none;
    letter-spacing: 2px;
    outline: none;
  }

  .row {
    margin-bottom: 40px;
  }

<!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">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="test.js"></script>
    <link rel="stylesheet" href="test.css">
</head>
<body>

    <div >
        <div  style="text-align: center;">
          <button type="button"  id="btnOne">BUTTON ONE</button>
          <button type="button"  id="btnTwo">BUTTON TWO</button>
          <button type="button"  id="btnThree">BUTTON THREE</button>
        </div>
    </div>

    <div >
        <div  style="text-align: center;">
          <button type="button"  id="btnFour">BUTTON FOUR</button>
          <button type="button"  id="btnFive">BUTTON FIVE</button>
          <button type="button"  id="btnSix">BUTTON SIX</button>
        </div>
    </div>

</body>
</html>