Question

我试图将一个类插入父元素。我想在选中输入但未选中删除类时为父对象插入边框。

谢谢

if ($('.input.colorSpanInput').prop("checked")) {
  $('.colorSpan').addClass('selected');
}

.selected {
  border: 2px #ccc solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="colorSpan">
        <input type="radio" name="color" class="colorSpanInput" checked>
  </span>

Answer 1

将'.input.colorSpanInput'更改为'.colorSpanInput'，您的代码将可用

$(document).ready(function(){
  $('.colorSpanInput').each(function(){
    if($(this).prop( "checked" )){
      $(this).parent('.colorSpan').addClass('selected');
    }
  });
});

.selected {border:2px #ccc solid;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="colorSpan">
  <input type="radio" name="color" class="colorSpanInput" checked>
</span>
<br>
<span class="colorSpan">
  <input type="radio" name="color" class="colorSpanInput">
</span>

注意：-您的单选按钮没有input类，因此.input将不起作用。

您也可以使用input.colorSpanInput

$(document).ready(function(){
  $('input.colorSpanInput').each(function(){
    if($(this).prop( "checked" )){
      $(this).parent('.colorSpan').addClass('selected');
    }
  });
});

.selected {border:2px #ccc solid;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="colorSpan">
  <input type="radio" name="color" class="colorSpanInput" checked>
</span>
<br>
<span class="colorSpan">
  <input type="radio" name="color" class="colorSpanInput">
</span>

Answer 2

您根本不需要jQuery。这是解决您问题的有效Javascript解决方案，代码中的注释说明了发生的情况。

// get a list of all .colorSpanInput elements in the page
const colorSpanInputs = document.querySelectorAll('.colorSpanInput');

// iterate over the list and add a change listener to each of them
// toggling the selected class on the parent element depending on the checked state
for (const colorSpanInput of colorSpanInputs) {
  // set correct initial state
  colorSpanInput.parentElement.classList[colorSpanInput.checked ? 'add' : 'remove']('selected');
  // and add the change listener so things adjust dynamically
  colorSpanInput.addEventListener('change', function() {
    // because checking one radio button will uncheck all others with the same name
    // and because that unchecking won't trigger a change event on those
    // with every change event occurring we need to make sure each radio
    // is evaluated again, otherwise the .selected class never gets removed once on:
    for (const colorSpanInput of colorSpanInputs) {       
      colorSpanInput.parentElement.classList[colorSpanInput.checked ? 'add' : 'remove']('selected');
    }
  })
}

.selected {
  border: 2px #ccc solid;
}

<span class="colorSpan">
  <input type="radio" name="color" class="colorSpanInput" checked />
</span>
<hr />
<span class="colorSpan">
  <input type="radio" name="color" class="colorSpanInput" />
</span>
<hr />
<span class="colorSpan">
  <input type="radio" name="color" class="colorSpanInput" />
</span>
<hr />
<span class="colorSpan">
  <input type="radio" name="color" class="colorSpanInput" />
</span>

这将适用于任意数量的.colorSpanInput元素，并且仅更改父元素的样式。

将CSS类插入父元素

2 个答案: