javascript - 当选中单选按钮时将类添加到父 div 并在选中其他单选按钮时删除类

Question

当选中单选按钮时，我可以向父 div 添加一个类。现在，当我想单击另一个单选按钮时，我想删除前一个 div 上的类。

这就是我所拥有的:

$(".radio").change(function() {
  if ($(this).is(":checked")) {
    $(this).parent().parent().parent().addClass('selected-prize');
  }
});

.selected-prize {
  border: 1px solid red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prize-wrapper">
  <div class="prize">
    <h1>Cooking class <br> Cooking class</h1>
    <div class="img-holder">
      <img src="{{ asset('assets/images/emo.png') }}" alt="">
    </div>
    <div class="form-check">
      <input class="radio" type="radio" id="test3" name="radio-group2">
      <label for="test3">Select</label>
    </div>
  </div>
</div>

<div class="prize-wrapper">
  <div class="prize">
    <h1>Cooking class <br> Cooking class</h1>
    <div class="img-holder">
      <img src="{{ asset('assets/images/emo.png') }}" alt="">
    </div>
    <div class="form-check">
      <input class="radio" type="radio" id="test4" name="radio-group2">
      <label for="test4">Select</label>
    </div>
  </div>
</div>

Answer 1

您可以先删除selected-prize类:

$(".radio").change(function() {
  $(".prize-wrapper").removeClass('selected-prize');

  if ($(this).is(":checked")) {
    $(this).parent().parent().parent().addClass('selected-prize');
  }
});

.selected-prize {
  border: 1px solid red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prize-wrapper">
  <div class="prize">
    <h1>Cooking class <br /> Cooking class</h1>
    <div class="img-holder">
      <img src="{{ asset('assets/images/emo.png') }}" alt="" />
    </div>
    <div class="form-check">
      <input class="radio" type="radio" id="test3" name="radio-group2" />
      <label for="test3">Select</label>
    </div>
  </div>
</div>

<div class="prize-wrapper">
  <div class="prize">
    <h1>Cooking class <br /> Cooking class</h1>
    <div class="img-holder">
      <img src="{{ asset('assets/images/emo.png') }}" alt="" />
    </div>
    <div class="form-check">
      <input class="radio" type="radio" id="test4" name="radio-group2" />
      <label for="test4">Select</label>
    </div>
  </div>
</div>