javascript - 当选中该按钮时，将类添加到单选按钮的父级(具有特定类)

Question

当单击单选按钮时，我需要使用“.add-class-here”类添加一个 div 类(DOM 上的一些元素)。

共有三个，因此我还需要一种方法来确保仅更改该特定 radio 的父 div。

我有以下代码:

$(document).ready(function() {

    $("input[type='radio']").click(function() {
        if (!$("input[type='radio']").val()) {
           console.log('Nothing is checked!');
            return false;
        }
        else {
          $(".add-class-here").addClass("radio-checked");
        }
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-class-here">
  <div class="radio1">
    <label><input type="radio"> Radio button 1</label>
  </div>
</div>

<div class="add-class-here">
  <div class="radio2">
    <label><input type="radio"> Radio button 2</label>
  </div>
</div>

<div class="add-class-here">
  <div class="radio3">
    <label><input type="radio"> Radio button 3</label>
  </div>
</div>

我尝试了以下操作，但这将类添加到所有 3 个元素，其中包含类“add-class-here”这也会显示控制台日志消息两次

Answer 1

使用 jQuery closest 方法。

$(".add-class-here").addClass("radio-checked") 将为所有具有 add-class-here 类的元素添加类在当前文档中可用。

$(e.target).closest(".add-class-here").addClass("radio-checked") 只会将类添加到最近的 add-class -here 元素到 e.target 元素(即单击的单选按钮)。

$(document).ready(function() {
    $("input[type='radio']").click(function(e) {
        if (!$("input[type='radio']").val()) {
           console.log('Nothing is checked!');
            return false;
        }
        else {
          // only the closest `add-class-here` element to the clicked radio button
          $(e.target).closest(".add-class-here").addClass("radio-checked");
        }
    });

});

.radio-checked {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-class-here">
  <div class="radio1">
    <label><input type="radio"> Radio button 1</label>
  </div>
</div>

<div class="add-class-here">
  <div class="radio2">
    <label><input type="radio"> Radio button 2</label>
  </div>
</div>

<div class="add-class-here">
  <div class="radio3">
    <label><input type="radio"> Radio button 3</label>
  </div>
</div>