Question

如果要检查最接近的.form-group，我想向hotelObj添加一个类，如果没有选中hotelObj，则要删除该类。

我想在这里使用css()而不是addClass()。

$(".form-group").click(function() {
  if ($(this).children(".hotelObj").is(":checked")) {
    $(this).css("backgroundColor", "pink");
    alert("fungiuje")
  } else {
    $(this).css("backgroundColor", "transparent");
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="form-group" for="male1" style="font-weight:800;float: left;">
  <div>
    Header
    <input type="radio" value="z5" id="male1" class="hotelObj" name="hotelType" >
    </div>
  <p>something</p>
</label>

Answer 1

问题是因为您要从父元素调用children()，而您要查找的元素却是孙子。您可以使用find()来解决此问题，但是还有一种语义方法。

您可以反转逻辑；在单选按钮上放置一个change事件处理程序，并在父.form-group元素上设置类，如下所示：

$(".hotelObj").change(function() {
  $('.form-group').removeClass('foo');
  $(this).closest('.form-group').addClass('foo');
})

.foo {
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="form-group" for="male1" style="font-weight:800;float: left;">
  <div>
    Header
    <input type="radio" value="z5" id="male1" class="hotelObj" name="hotelType" >
  </div>
  <p>something</p>
</label>
<label class="form-group" for="male2" style="font-weight:800;float: left;">
  <div>
    Header
    <input type="radio" value="z5" id="male2" class="hotelObj" name="hotelType" >
  </div>
  <p>something</p>
</label>

如果您绝对必须使用css()而不是addClass()（我强烈建议您不要使用），则可以执行以下操作：

$(".hotelObj").change(function() {
  $('.form-group').css('background-color', 'transparent');
  $(this).closest('.form-group').css('background-color', 'pink');
})

Answer 2

这是我经常遇到的代码形式。

我们希望将一个类应用于所单击的元素（或其父元素），但也希望从先前单击的元素中删除该类（以便在任何给定时间只有一个这样的元素具有该类） 。同样的策略/代码形式也用于使复选框或DIV的行为类似于单选按钮。

这很简单：

我们首先从所有.form-group元素中删除该类，然后将其应用于刚刚单击的form-group。

$('.hotelObj').click(function(){
    $('.form-group').removeClass('bgPink');
    if ( $(this).is(':checked') ){
        $(this).closest('.form-group').addClass('bgPink');
    }
});

.bgWheat{background:pink;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="form-group" for="male1" style="font-weight:800;float: left;">
   <div>
      Header
      <input type="radio" value="z5" id="male1" class="hotelObj" name="hotelType[]" >
   </div>
   <p>something</p>
</label>
<label class="form-group" for="male2" style="font-weight:800;float: left;">
   <div>
      Header
      <input type="radio" value="z6" id="male2" class="hotelObj" name="hotelType[]" >
   </div>
   <p>something</p>
</label>

Answer 3

您可以先将click事件分配给单选按钮，然后检查该特定按钮是否已选中/未选中，然后相应地添加/删除该类：

var classToAdd = 'some-class';
$(".hotelObj").click(function() {
  $('.form-group').removeClass(classToAdd);
  if ($(this).is(":checked")) {
    $(this).closest(".form-group").addClass(classToAdd);
  }
})

.form-group.some-class{
  background: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="form-group" for="male1" style="font-weight:800;float: left;">
    <div>
      Header 1
      <input type="radio" value="z5" id="male1" class="hotelObj" name="hotelType" />
      </div>
    <p>something 1</p>
  </label>

<label class="form-group" for="male1" style="font-weight:800;float: left;">
    <div>
      Header 2
      <input type="radio" value="z5" id="male2" class="hotelObj" name="hotelType" />
      </div>
    <p>something 2</p>
  </label>

Answer 4

我建议根据动作使用jQuery的addClass()和removeClass()方法来添加或删除这样的类

如果选中输入，则将类添加到HTML元素

4 个答案: