javascript - jQuery:使用 parent()、next() 对单击单选按钮进行样式设置和取消样式设置

Question

我有 3 个相同的部分。它们彼此完全相同。
我想要实现的是，当我点击 ".rad1"(第一个单选按钮) 时，它会为其标签设置样式。
当我点击 ".rad2" 时，它应该取消第一个单选按钮的样式并为第二个单选按钮设置样式。

我只希望它发生在它自己的部分，也就是说，当我点击一个部分时，样式只应用到那个部分，而不是其他部分。

这就是我所拥有的，但我还没有找到实现它的方法:

$('.rad1').click(function() {
    $(this).parent('.label1').css('background', 'red');
});
$('.rad2').click(function() {
    $(this).parent().next('.label1').css('background', 'transparent');
    $(this).parent('.label2').css('background', 'red');
});

.form-section {
background: orange;
border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-section">
    <form action="">
        <div class="first">
            <label for="radio" class="label1">
                <input type="radio" class="rad1" name="rad">First
            </label>
        </div>
        <div class="second">
            <label for="radio" class="label2">
                <input type="radio" class="rad2" name="rad">Second
            </label>
        </div>
    </form>
</div>
<!------------SECTION-->
<div class="form-section">
    <form action="">
        <div class="first">
            <label for="radio" class="label1">
                <input type="radio" class="rad1" name="rad">First
            </label>
        </div>
        <div class="second">
            <label for="radio" class="label2">
                <input type="radio" class="rad2" name="rad">Second
            </label>
        </div>
    </form>
</div>
<!------------SECTION-->
<div class="form-section">
    <form action="">
        <div class="first">
            <label for="radio" class="label1">
                <input type="radio" class="rad1" name="rad">First
            </label>
        </div>
        <div class="second">
            <label for="radio" class="label2">
                <input type="radio" class="rad2" name="rad">Second
            </label>
        </div>
    </form>
</div>

Answer 1

我会这样做:

$('input[name="rad"]').click(function() {
  $(this).closest('form').find('label').css('background', 'transparent')
  $(this).parent().css('background', 'red');
});

$('input[name="rad"]').click(function() {
  $(this).closest('form').find('label').css('background', 'transparent')
  $(this).parent().css('background', 'red');
});

.form-section {
  background: orange;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-section">
  <form action="">
    <div class="first">
      <label for="radio" class="label1">
        <input type="radio" class="rad1" name="rad">First
      </label>
    </div>
    <div class="second">
      <label for="radio" class="label2">
        <input type="radio" class="rad2" name="rad">Second
      </label>
    </div>

  </form>
</div>
<!------------SECTION-->
<div class="form-section">
  <form action="">
    <div class="first">
      <label for="radio" class="label1">
        <input type="radio" class="rad1" name="rad">First
      </label>
    </div>
    <div class="second">
      <label for="radio" class="label2">
        <input type="radio" class="rad2" name="rad">Second
      </label>
    </div>

  </form>
</div>
<!------------SECTION-->
<div class="form-section">
  <form action="">
    <div class="first">
      <label for="radio" class="label1">
        <input type="radio" class="rad1" name="rad">First
      </label>
    </div>
    <div class="second">
      <label for="radio" class="label2">
        <input type="radio" class="rad2" name="rad">Second
      </label>
    </div>

  </form>
</div>

添加和删除一个类可能比使用 .css() 设置标签样式更好。