如何为具有相同“类”的两个标签添加类;对于“;属性

How to add class for two labels with the same "for" attribute?

本文关键字：两个 标签 属性 对于 添加      更新时间：2023-09-26

我有一些类似手风琴的东西，带有左侧标签导航，以及内部（在accordsection内部）标签，如"next/prev"。那么，问题是如何检查是否有两个属性为"for"的相同标签，并向它们添加类？

input {
display: none;
}
input:checked + label {
color: red;
}
input + section {
display: none
}
input:checked + section {
display: block
}
label {
display: inline-block;
  border: 1px solid green;
  padding: 10px;
}
<label for="check">Label #1</label>
<label for="check2">Label #2</label>
<label for="check3">Label #3</label>
<label for="check4">Label #4</label>
<div>
<input type="radio" name="test" id="check"> 
<section>
Lorem ipsum dolor sit amet, vitae graeci vidisse et his, et vis quod appetere vulputate, eius verear habemus usu ne. Et usu senserit mediocrem imperdiet, habeo fugit paulo mel at. Velit minimum te qui. Sed te pertinacia eloquentiam, ad modus ponderum luptatum vel, vidisse accommodare id sit
<div><label for="check2">Next #2</label></div>
</section>
  
  <input type="radio" name="test" id="check2"> 
<section>
Lorem ipsum dolor sit amet, vitae graeci vidisse et his, et vis quod appetere vulputate, eius verear habemus usu ne. Et usu senserit mediocrem imperdiet, habeo fugit paulo mel at. Velit minimum te qui. Sed te pertinacia eloquentiam, ad modus ponderum luptatum vel, vidisse accommodare id sit
  <div><label for="check">Prev #1</label>
  <label for="check3">Next #3</label>
    </div>
</section>
  
  <input type="radio" name="test" id="check3"> 
<section>
Mel no erat platonem. Ius ad veritus minimum molestiae, ea blandit adolescens vix. Impetus epicuri ocurreret usu in, id aeterno fastidii molestiae his. Eruditi nonumes vel cu, has feugait ancillae efficiendi ex, cu vel augue tacimates. Augue mnesarchum et mei.
  <div><label for="check3">Prev #3</label> <label for="check4">Next #4</label></div>
</section>
  
  <input type="radio" name="test" id="check4"> 
<section>
Odio facilisis persequeris eu sed, in sea oblique labores. Ei vel utamur menandri, paulo omnium delectus vix id. Pri choro impetus persecuti eu. Est id illud luptatum dissentiunt. Vim id nemore aliquip, sea eligendi deseruisse ea. Quot elitr et has, deleniti oportere et nec, an molestiae adipiscing eos.
<div><label for="check3">Prev #3</label><label for="check">Next #1</label></div>
</section>
</div>

只需选择具有相同输入id的所有标签并添加您的类：

var id = "check",
    label = $('label[for="' + id + '"]');
label.addClass('your-class');

这将帮助您：

$('.btn-lbl').click(function() {
    var id = $(this).attr('for');
    $('.how-it-works--label[for="' + id + '"]').addClass('active');
});
相关文章：