Question

0

148

Views

Using the Same jQuery Function in Separate Buttons

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>

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

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>

about 4 years ago · Juan Pablo Isaza Report

0

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>

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-06-30T18:27:52.123Z

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>

0

148

Using the Same jQuery Function in Separate Buttons

3 answers

0

0

0

Demo

Find remote jobs

Andres GPT