我有一個Bootstrap佈局:一個容器,一行,幾個「block-divs」和三個div用於每個block-div。 block-div的數量是由腳本動態創建的(用戶選擇在頁面上顯示的塊數),但每個塊都包含三個div。如何爲每個塊設置一個活動類? [Javascript]
當用戶點擊一個div時,活動類被添加到它。 我的問題是,我的代碼將在整個頁面中只設置一個活動類,但我想爲每個塊設置一個活動類。
如何在不使用任何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>
那麼你想要設置一個點擊活動類的許多塊或每次點擊你可以設置類,它不會被刪除? –
jQuery是Bootstrap的硬依賴項。你可以使用jQuery嗎? –
@DeividasKaržinauskas我想在第一個塊上設置一個活動類的div,在第二個塊上設置一個活動類的div,依此類推。每個塊只有一個div有活動類。如果一個塊已經有一個活動類的div,我點擊另一個div,點擊的新div將有活動類,舊的將失去它。 – Lewis