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

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

Answer 1

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

这里的一般技巧是将每个滑块input，label和div放在标记中，这样兄弟选择器就会起作用。

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

添加类开始于在选中时动态创建Radiobuttons

1 个答案: