最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Remove class when click another button using JQuery - Stack Overflow

programmeradmin1浏览0评论

I'm figure out for how to remove class selected when clicking other button. I've made code below but still not working. Can anyone help me?

EDIT

The case study, I have 2 choice boxes. box 1 and box 2. each box has 2 options. When click on box 1 option 1 and move to box 1 option 2, it works fine. But when I click box 2 option 1, the options in box 1 should not change. So there will be 2 buttons that have the selected class, namely box 1 choice 2 and box 2 choice 1

$(document).ready(function(){
  $('.box-1 button, .box-2 button').on('click', function(){
    $(this).addClass('selected');
    $('.box-1 button, .box-2 button').not(this).removeClass('selected');
  });
});
button{
  border:none;
  background-color:#1f45;
  padding: .5rem 2.5rem;
  border-radius: 2rem;
}

.box-1{
  margin-bottom: 15px;
}

button.selected{
  background-color: #578889;
  color: #fff;
}
<script src=".3.1/jquery.min.js"></script>
<h3>Box 1 Choice</h3>
<div class="box-1">
  <button>Box 1 Option 1</button>
  <button>Box 1 Option 2</button>
</div>

<h3>Box 2 Choice</h3>
<div class="box-2">
  <button>Box 2 Option 1</button>
  <button>Box 2 Option 2</button>
</div>

I'm figure out for how to remove class selected when clicking other button. I've made code below but still not working. Can anyone help me?

EDIT

The case study, I have 2 choice boxes. box 1 and box 2. each box has 2 options. When click on box 1 option 1 and move to box 1 option 2, it works fine. But when I click box 2 option 1, the options in box 1 should not change. So there will be 2 buttons that have the selected class, namely box 1 choice 2 and box 2 choice 1

$(document).ready(function(){
  $('.box-1 button, .box-2 button').on('click', function(){
    $(this).addClass('selected');
    $('.box-1 button, .box-2 button').not(this).removeClass('selected');
  });
});
button{
  border:none;
  background-color:#1f45;
  padding: .5rem 2.5rem;
  border-radius: 2rem;
}

.box-1{
  margin-bottom: 15px;
}

button.selected{
  background-color: #578889;
  color: #fff;
}
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Box 1 Choice</h3>
<div class="box-1">
  <button>Box 1 Option 1</button>
  <button>Box 1 Option 2</button>
</div>

<h3>Box 2 Choice</h3>
<div class="box-2">
  <button>Box 2 Option 1</button>
  <button>Box 2 Option 2</button>
</div>

Share Improve this question edited Jan 17, 2021 at 14:12 Frauds asked Jan 17, 2021 at 13:51 FraudsFrauds 1372 gold badges3 silver badges15 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 4
$(document).ready(function(){
  $('button').on('click', function(){
     $('button').removeClass('selected');
     $(this).addClass('selected')
  });
});

it will work!

You can use .not(this) to exclude button which is clicked and remove selected class from there

Demo Code :

$(document).ready(function() {
  $('button').on('click', function() {
    $(this).addClass('selected');
    $(this).closest('div').find('button').not(this).removeClass('selected');
  });
});
button {
  border: none;
  background-color: #1f45;
  padding: .5rem 2.5rem;
  border-radius: 2rem;
}

button.selected {
  background-color: #578889;
  color: #fff;
}
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-1">
  <button>Box 1 Option 1</button>
  <button>Box 1 Option 2</button>
</div>

<div class="box-2">
  <button>Box 2 Option 1</button>
  <button>Box 2 Option 2</button>
</div>

remove selected class before adding it to button You to make it work in different wrappers you need $(this).parent(), and then search for call selected

$(document).ready(function(){
  $('button').on('click', function(){
  $(this).parent().find('.selected').removeClass('selected');
    $(this).addClass('selected');
  });
});
button{
  border:none;
  background-color:#1f45;
  padding: .5rem 2.5rem;
  border-radius: 2rem;
}

button.selected{
  background-color: #578889;
  color: #fff;
}
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-1">
  <button>Box 1 Option 1</button>
  <button>Box 1 Option 2</button>
</div>

<h3>Box 2 Choice</h3>
<div class="box-2">
  <button>Box 2 Option 1</button>
  <button>Box 2 Option 2</button>
</div>

You have to remove the class from every button and after that to the clicked button

$(document).ready(function(){
  $('button').on('click', function(){
    $('button').removeClass('selected');
    $(this).addClass('selected');
  });
});
发布评论

评论列表(0)

  1. 暂无评论