如何使用jquery child（）方法在許多元素中添加類？

Question

我寫了一個函數來標記和控制紅色邊框的div元素。它由選擇元素控制。選項是kotak1，kotak2等。所以當我選擇kotak1時，關聯的div邊框變爲紅色。當我更改其他選項時，如何將該div元素再次恢復爲黑色邊框？

HTML

<div id="group-select"> 
    <select id="select_kotak"> 
     <option selected>Pilih Kotak</option> 
    </select> 
</div> 
<br> 
<div id="group-kotak"> 
    <div class="kotak-nonaktif">Kotak 1</div> 
    <div class="kotak-nonaktif">Kotak 2</div> 
    <div class="kotak-nonaktif">Kotak 3</div> 
    <div class="kotak-nonaktif">Kotak 4</div> 
</div> 

.kotak-nonaktif { 
    height: 100px; 
    width: 100px; 
    border: 1px solid black; 
    float: left; 
    margin-left: 1px; 
} 
.kotak-aktif { 
    height: 100px; 
    width: 100px; 
    border: 3px solid red; 
    float: left; 
    margin-left: 1px; 
} 

$(document).ready(function() { 
    set_pasar_option(); 
}); 

function set_pasar_option() { 
    for (i = 1; i < 5; i++) { 
     var option = document.createElement("option"); 
     option.text = "Kotak" + i; 
     option.value = "value" + i; 
     option.id = "id" + i; 
     var select = document.getElementById("select_kotak"); 
     select.appendChild(option); 
     option.addEventListener('click', function() { 
      aktif_kotak(this.id); 
     }); 
    } 
} 

function non_aktif_kotak() { 
    var allkotak = document.getElementById('groupkotak').children(); 
    $(allkotak).addClass("kotak-nonaktif"); 
} 

function aktif_kotak(id) { 
    //non_aktif_kotak(); 
    id = id.substr(2, 4); 
    id = parseInt(id) - 1; 
    var kotak_aktif = document.getElementById('group-kotak').children[id]; 
    $(kotak_aktif).addClass("kotak-aktif"); 
} 

FIDDLE

Answer 1

只需添加這條線在你aktif_kotak()功能：

$(kotak_aktif).siblings().removeClass("kotak-aktif"); 

最後這樣。

function aktif_kotak(id){ 
    //non_aktif_kotak(); 
    id=id.substr(2, 4); 
    id=parseInt(id)-1; 
    var kotak_aktif=document.getElementById('group-kotak').children[id]; 
    $(kotak_aktif).addClass("kotak-aktif"); 
    $(kotak_aktif).siblings().removeClass("kotak-aktif"); 
} 

DEMO