html - 添加类开始于动态创建的单选按钮

Question

我有几个单选按钮和几个标签，就像这样

<div class="col-md-12"> 
     <input type="radio" name="slider" class="slide-radio1" id="slider_1">
     <input type="radio" name="slider" class="slide-radio2" checked id="slider_2">
     <input type="radio" name="slider" class="slide-radio3" id="slider_3">

   <!-- Slider Pagination -->
  <div class="slider-pagination">
     <label for="slider_1" class="page1"></label>
     <label for="slider_2" class="page2"></label>
     <label for="slider_3" class="page3"></label>
  </div>

    <!-----slider Navigator----->
   <div class="navigator left">
     <i class="fa fa-chevron-left" aria-hidden="true"></i>
   </div>
   <div class="navigator right">
     <i class="fa fa-chevron-right" aria-hidden="true"></i>
   </div>


   <!-- Slider #1 -->
   <div class="slider slide-1 inner-container">

   </div>
   <!-- Slider #2 -->
   <div class="slider slide-2 inner-container">

   </div>
   <!-- Slider #2 -->
   <div class="slider slide-3 inner-container">

   </div> 
</div>

它们的样式是这样的，让标签在点击时检查单选按钮:

  .slide-radio1:checked ~ .slider-pagination .page1,
  .slide-radio2:checked ~ .slider-pagination .page2,
  .slide-radio3:checked ~ .slider-pagination .page3,
  .slide-radio4:checked ~ .slider-pagination .page4 {
    width: 14px;
    height: 14px;
    border: 2px solid #ea2e49;
    background: transparent;
  } 

您一定已经注意到，每次点击每个标签时，他们都会检查相应的单选按钮并设置样式，但现在我正在动态创建这些元素，并且有更多的标签和单选按钮，

var arrElement=[{"id": 1,
"imageLink": "https://images.gr-assets.com/authors/1193930952p8/61105.jpg",
"name": "TwichTV app",
"desc": "App that detects if station is online/offline",
"Info": "....."},
           {
             "..":"....."
           }]

     window.arrElement.forEach(function (val) {
        var keys = Object.keys(val);
        keys.forEach(function (key) {
          //here is where i append them to the DOM
          //for each item a radiobutton and label is created and added to DOM
        });
    });

我怎样才能将这种风格应用于所有这些而不仅仅是 3。我想出了使用 class starts with 的想法

 [class*="slide-radio2"]:checked ~ .slider-pagination [class*="page"]{
   width: 14px;
    height: 14px;
   border: 2px solid #ea2e49;
   background: transparent;
 } 

它起作用了，但所有元素的样式都已选中，而不是与该标签等效的元素。我怎么解决这个问题。任何建议表示赞赏。

Answer 1

一种可能的方法是将 Flexbox 与相邻的兄弟选择器和标记更改结合使用。

这里的一般技巧是将每个 slider input、label 和 div 放在标记中，这样兄弟选择器就可以发挥作用了.

使用 Flexbox 属性 order 然后可以重新定位元素并以与原始布局相同的方式对输入、标签和 div 进行分组。

.col-md-12 {
  display: flex;
  flex-wrap: wrap;
}

.col-md-12 input:checked + label {
  color: red;
}
.col-md-12 input:checked + label + div {
  color: red;
}

.col-md-12 input {
  flex-basis: 3%;
  margin-right: 27%;
  order: 1;
}
.col-md-12 label {
  flex-basis: 30%;
  margin-top: 10px;
  order: 2;
}
.col-md-12 .navigator {
  flex-basis: 50%;
  margin-top: 10px;
  order: 3;
}
.col-md-12 .slider {
  flex-basis: 100%;
  margin-top: 10px;
  order: 4;
}

<div class="col-md-12">
  <input type="radio" name="slider" class="slide-radio1" id="slider_1">
  <label for="slider_1" class="page1">label 1</label>
  <div class="slider slide-1 inner-container">
  container 1
  </div>

  <input type="radio" name="slider" class="slide-radio2" checked id="slider_2">
  <label for="slider_2" class="page2">label 2</label>
  <div class="slider slide-2 inner-container">
  container 2
  </div>

  <input type="radio" name="slider" class="slide-radio3" id="slider_3">
  <label for="slider_3" class="page3">label 3</label>
  <div class="slider slide-3 inner-container">
  container 3
  </div>  

  <!-----slider Navigator----->
  <div class="navigator left">
    <i class="fa fa-chevron-left" aria-hidden="true">nav left</i>
  </div>
  <div class="navigator right">
    <i class="fa fa-chevron-right" aria-hidden="true">nav right</i>
  </div>

</div>