Hinzufügen Klasse beginnt mit dynamisch Radiobuttons erstellt auf karierte

Question

Ich habe ein paar Radio-Buttons und ein paar Etikett zusammen wie diese

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

sie werden so gestylt das Label zu haben, die Radio-Buttons auf Klick überprüfen :

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

, wie Sie auf jedem Klick jedes Etiketts überprüfen sie ihre äquivalenten Radiobutton und Stil, aber jetzt bin ich dynamisch Erstellung dieser Elemente und es gibt mehr Labels und Radiobuttons bemerkt haben muss,

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

wie kann ich diesen Stil für alle von ihnen gelten und nicht nur 3. Ich mit und Idee kam Klasse zu verwenden beginnt mit

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

es funktionierte aber Stile alle Elemente als aufgegebenes und nicht die ein Äquivalent zu diesem Etikett. Wie kann ich dieses Problem lösen? Irgendwelche Vorschläge werden geschätzt.

Answer 1

Ein möglicher Weg wäre die Verwendung von Flexbox in Kombination mit dem benachbarten Geschwisterselektor und einer Markup-Änderung.

Der generelle Trick hier ist, setzen Sie die Schieberegler input, label und div zusammen in der Markup, so dass der Geschwisterselektor ins Spiel kommt.

Mit der Flexbox-Eigenschaft order kann man dann die Elemente neu positionieren und die Eingaben, Beschriftungen und Divs auf die gleiche Weise gruppieren, wie das ursprüngliche Layout aussieht.

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