添加類動態地創建單選按鈕上啓動檢查

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進行分組。

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