ブロックごとに1つのアクティブなクラスを設定するにはどうすればよいですか？ [Javascript]

Question

私はブートストラップのレイアウトを持っています：コンテナ、行、いくつかの "block-divs"、すべてのblock-divの3つのdiv。 block-divの数は、スクリプトによって動的に作成されます（ユーザーはページに表示されるブロックの数を選択します）が、すべてのブロックに3つのdivが含まれます。

ユーザーがdivをクリックすると、アクティブなクラスが追加されます。 私の問題は、私のコードはページ全体でアクティブなクラスを1つだけ設定することですが、すべてのブロックに対して1つのアクティブなクラスを設定したいと思います。

JSフレームワーク（純粋なJavaScriptのみ）を使用せずにどのように達成できますか？ https://jsfiddle.net/9vr92ss4/

var myCol = document.getElementsByClassName('myCol'); 
 

 
function getTarget(e) { 
 
    if (!e) { 
 
    e = window.event; 
 
    } 
 
    return e.target || e.srcElement; 
 
} 
 

 
function setActive(e) { 
 
    var target = getTarget(e); 
 
    for (i = 0; i < myCol.length; i++) { 
 
    \t myCol[i].className = 'col-xs-4 myCol'; 
 
    } 
 
    
 
    target.className = 'col-xs-4 myCol active'; 
 
} 
 

 
for (j = 0; j < myCol.length; j++) { 
 
    myCol[j].addEventListener('click', function(e) { 
 
    setActive(e); 
 
    }, false); 
 
}

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet'); 
 

 
body { 
 
    margin: 10px; 
 
} 
 

 
.myCol { 
 
    padding: 40px 0; 
 
    border: 1px solid #F44336; 
 
    cursor: pointer; 
 
    margin: 30px 0; 
 
} 
 

 
.active { 
 
    background: #9C27B0; 
 
    border: 1px solid #9C27B0; 
 
    color:#fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container text-center"> 
 
    <div class="row"> 
 
    
 
    <div class="col-xs-12 block"> 
 
     <div class="col-xs-4 myCol">a-1</div> 
 
     <div class="col-xs-4 myCol">b-1</div> 
 
     <div class="col-xs-4 myCol">c-1</div> 
 
    </div> 
 
    
 
    <div class="col-xs-12 block"> 
 
     <div class="col-xs-4 myCol">a-2</div> 
 
     <div class="col-xs-4 myCol">b-2</div> 
 
     <div class="col-xs-4 myCol">c-2</div> 
 
    </div> 
 
    
 
    <div class="col-xs-12 block"> 
 
     <div class="col-xs-4 myCol">a-3</div> 
 
     <div class="col-xs-4 myCol">b-3</div> 
 
     <div class="col-xs-4 myCol">c-3</div> 
 
    </div> 
 
    
 
    </div> 
 
</div>

Answer 1

あなたは積極的にこれでクラス名をリセットされています：

for (i = 0; i < myCol.length; i++) { 
    myCol[i].className = 'col-xs-4 myCol'; 
} 

あなたがいるかどうかを確認する必要があり

私はあなたに私のレイアウトの一例を残しますmyColの親ノードは、targetの親ノードと同じです：

function setActive(e) { 
    var target = getTarget(e), 
     section = target.parentNode; 

    for (i = 0; i < myCol.length; i++) { 
    if (myCol[i].parentNode === section) { 
     myCol[i].className = 'col-xs-4 myCol'; 
    } 
    } 

    target.className = 'col-xs-4 myCol active'; 
} 

この更新作業スニペットを参照してください：

var myCol = document.getElementsByClassName('myCol'); 
 

 
function getTarget(e) { 
 
    if (!e) { 
 
    e = window.event; 
 
    } 
 
    return e.target || e.srcElement; 
 
} 
 

 
function setActive(e) { 
 
\t var target = getTarget(e), 
 
     section = target.parentNode; 
 
    
 
    for (i = 0; i < myCol.length; i++) { 
 
    if (myCol[i].parentNode === section) { 
 
     myCol[i].className = 'col-xs-4 myCol'; 
 
    } 
 
    } 
 
    
 
    target.className = 'col-xs-4 myCol active'; 
 
} 
 

 
for (j = 0; j < myCol.length; j++) { 
 
    myCol[j].addEventListener('click', function(e) { 
 
    setActive(e); 
 
    }, false); 
 
}

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet'); 
 

 
body { 
 
    margin: 10px; 
 
} 
 

 
.myCol { 
 
    padding: 40px 0; 
 
    border: 1px solid #F44336; 
 
    cursor: pointer; 
 
    margin: 30px 0; 
 
} 
 

 
.active { 
 
    background: #9C27B0; 
 
    border: 1px solid #9C27B0; 
 
    color:#fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container text-center"> 
 
    <div class="row"> 
 
    
 
    <div class="col-xs-12 block"> 
 
     <div class="col-xs-4 myCol">a-1</div> 
 
     <div class="col-xs-4 myCol">b-1</div> 
 
     <div class="col-xs-4 myCol">c-1</div> 
 
    </div> 
 
    
 
    <div class="col-xs-12 block"> 
 
     <div class="col-xs-4 myCol">a-2</div> 
 
     <div class="col-xs-4 myCol">b-2</div> 
 
     <div class="col-xs-4 myCol">c-2</div> 
 
    </div> 
 
    
 
    <div class="col-xs-12 block"> 
 
     <div class="col-xs-4 myCol">a-3</div> 
 
     <div class="col-xs-4 myCol">b-3</div> 
 
     <div class="col-xs-4 myCol">c-3</div> 
 
    </div> 
 
    
 
    </div> 
 
</div>

Answer 2

をここではなくjQueryを使用して、ずっと simplierソリューションです。

$('.myCol').click(function() { 
 
    $(this).parent().find('.myCol').removeClass('active'); 
 
    $(this).toggleClass('active'); 
 
})

body { 
 
    margin: 10px; 
 
} 
 

 
.myCol { 
 
    padding: 40px 0; 
 
    border: 1px solid #F44336; 
 
    cursor: pointer; 
 
    margin: 30px 0; 
 
} 
 

 
.active { 
 
    background: #9C27B0; 
 
    border: 1px solid #9C27B0; 
 
    color: #fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="container text-center"> 
 
    <div class="row"> 
 

 
    <div class="col-xs-12 block"> 
 
     <div class="col-xs-4 myCol">a-1</div> 
 
     <div class="col-xs-4 myCol">b-1</div> 
 
     <div class="col-xs-4 myCol">c-1</div> 
 
    </div> 
 

 
    <div class="col-xs-12 block"> 
 
     <div class="col-xs-4 myCol">a-2</div> 
 
     <div class="col-xs-4 myCol">b-2</div> 
 
     <div class="col-xs-4 myCol">c-2</div> 
 
    </div> 
 

 
    <div class="col-xs-12 block"> 
 
     <div class="col-xs-4 myCol">a-3</div> 
 
     <div class="col-xs-4 myCol">b-3</div> 
 
     <div class="col-xs-4 myCol">c-3</div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 3

あなたは一度に1行を考えることによって、問題を単純化することができます。

あなたは良い仕事をしています。必要なのは、グリッドの状態を格納するデータ構造だけです。