Using the Same jQuery Function in Separate Buttons

Question

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 class="row">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
          <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
          <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
        </div>
    </div>

    <div class="row2">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
          <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
          <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
        </div>
    </div>

</body>
</html>

David · Accepted Answer · 2022-04-18 14:02:45Z

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 class="row">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
          <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
          <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
        </div>
    </div>

    <div class="row2">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
          <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
          <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
        </div>
    </div>

</body>
</html>

Lee Taylor · Accepted Answer · 2022-04-18 14:02:30Z

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 class="row">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
          <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
          <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
        </div>
    </div>

    <div class="row2">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
          <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
          <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
        </div>
    </div>

</body>
</html>

John Slegers · Accepted Answer · 2022-05-18 19:55:44Z

Your error is that you add both click handlers to every button instead of only adding the appropriate handler to the appropriate buttons. So every time you push a button, you call both handlers consecutively, rather than just the handlers for that button set.

Replacing the first $("button") with $(".featuredBtn") and the second $("button") with $(".featuredBtn2") achieves what you're tying to achieve.

Note that there's no need to call $(document).ready() twice. You can just call it once combine the code for both handlers in that single call. Technically, this is not an error, but your code is cleaner if you just call $(document).ready() here.

Demo

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

  $(".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 class="row">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
          <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
          <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
        </div>
    </div>

    <div class="row2">
        <div class="col-lg-12 col-xs-12" style="text-align: center;">
          <button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
          <button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
          <button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
        </div>
    </div>

</body>
</html>

Collectives™ on Stack Overflow

Using the Same jQuery Function in Separate Buttons

3 Answers 3

Comments

Comments

Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Demo

Comments

Your Answer

Sign up or log in

Post as a guest

Related