jQuery 活动 class 在单击其他按钮时未删除

Question

我有两个 html 按钮，它们在单击时显示不同的信息。我正在使用 jQuery 来更改哪个按钮具有默认按钮 CSS 和活动按钮 CSS。我的代码如下。目前，当我点击相反的按钮时，默认的活动按钮不会切换到非活动样式。有什么建议么？提前致谢！

HTML:

<div class="center-buttons container space-between btn-group">
<button type="button" id="xValues" class="mobile-buttons desktop-w active-2">Button 1</button>
<button type="button" id="yValues" class="mobile-buttons desktop-w">Button 2</button></div>

jQuery:

$('.btn-group').on('click', 'button', function(){
$('.btn-group button.active-2').removeClass('active-2');
$(this).addClass('active-2');

CSS:

.center-buttons {
    text-align: center;
    margin: 20px 0px;
}

    .container {
    display: flex;
}

.space-between {
    justify-content: space-between;
}

.mobile-buttons {
    margin: 5px;
    border: none;
    border-bottom: 3px solid #B0B0B0;
    color: #B0B0B0;
    font-weight: 700;
    font-size: 12px;
}

.active-2, .mobile-buttons:hover {
    background-color: #fff;
    border-bottom: 3px solid #2d2d2d;
    color: #2d2d2d;
}

.desktop-w {
    width: 49%;
}

Answer 1

jQuery 代码中似乎存在语法错误。应用程序在事件处理程序方法以“})”终止时运行。

/* The event handler method is not terminated with "})". */
$('.btn-group').on('click', 'button', function(){
  $('.btn-group button.active-2').removeClass('active-2');
  $(this).addClass('active-2');
});

.center-buttons {
  text-align: center;
  margin: 20px 0px;
}
.container {
  display: flex;
}
.space-between {
  justify-content: space-between;
}
.mobile-buttons {
  margin: 5px;
  border: none;
  border-bottom: 3px solid #B0B0B0;
  color: #B0B0B0;
  font-weight: 700;
  font-size: 12px;
}
.active-2, .mobile-buttons:hover {
  background-color: #fff;
  border-bottom: 3px solid #2d2d2d;
  color: #2d2d2d;
}
.desktop-w {
  width: 49%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center-buttons container space-between btn-group">
<button type="button" id="xValues" class="mobile-buttons desktop-w active-2">Button 1</button>
<button type="button" id="yValues" class="mobile-buttons desktop-w">Button 2</button></div>

jQuery 活动 class 在单击其他按钮时未删除

jQuery active class is not removing when other button is clicked

javascript

jquery

elementor