文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在单独的按钮中使用相同的jQuery函数

问在单独的按钮中使用相同的jQuery函数
EN

Stack Overflow用户
提问于 2022-04-18 13:59:36
回答 3查看 45关注 0票数 1

我试着让每个按钮在点击时改变颜色。但是，我想把按钮1-3和按钮4-6分开，这样它们就相互独立了。我想要能够点击1-3，他们改变颜色，而不影响4-6，反之亦然。我的密码附上去了。我相信这是很简单的，但我软弱的头脑无法弄清楚:-)有什么建议吗？

​

代码语言：javascript
复制
$(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");
  });
});
代码语言：javascript
复制
.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;
  }
代码语言：javascript
复制
<!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>

​

javascript
html
jquery
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-04-18 14:02:45

不要将这两个处理程序应用于$('button')的所有实例，而是专门针对您想要的实例。当前的标记通过class将它们分隔开来，因此可以使用$(".featuredBtn")和$(".featuredBtn2")来标识这些元素：

​

代码语言：javascript
复制
$(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");
  });
});
代码语言：javascript
复制
.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;
  }
代码语言：javascript
复制
<!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>

​

票数 1
EN

Stack Overflow用户

发布于 2022-04-18 14:02:30

简单来说，只需使用您已经在选择器中提供的类。

另外，请注意，您只需要一个现成的处理程序，而不是两个。

​

代码语言：javascript
复制
$(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");
  });
});
代码语言：javascript
复制
.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;
  }
代码语言：javascript
复制
<!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
EN

Stack Overflow用户

发布于 2022-05-18 19:55:44

您的错误是将两个单击处理程序添加到每个button中，而不是只将适当的处理程序添加到相应的按钮中。因此，每次按下按钮时，都会连续调用两个处理程序，而不仅仅是该按钮集的处理程序。

将第一个$("button")替换为$(".featuredBtn")，将第二个$("button")替换为$(".featuredBtn2")实现了您想要实现的目标。

请注意，没有必要两次调用$(document).ready()。您只需调用一次，就可以将这两个处理程序的代码组合在同一次调用中。从技术上讲，这不是一个错误，但是如果您只在这里调用$(document).ready()，代码就会更干净。

演示

​

代码语言：javascript
复制
$(document).ready(function(){
  $(".featuredBtn").click(function() {
    $(".featuredBtn.active").removeClass("active");
    $(this).addClass("active");
  });

  $(".featuredBtn2").click(function() {
    $(".featuredBtn2.active").removeClass("active");
    $(this).addClass("active");
  });
});
代码语言：javascript
复制
.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;
  }
代码语言：javascript
复制
<!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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/71912792

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档