如何爲每個塊設置一個活動類？ [Javascript]

我有一個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>

來源

2017-02-22 Lewis

那麼你想要設置一個點擊活動類的許多塊或每次點擊你可以設置類，它不會被刪除？ –

jQuery是Bootstrap的硬依賴項。你可以使用jQuery嗎？ –

@DeividasKaržinauskas我想在第一個塊上設置一個活動類的div，在第二個塊上設置一個活動類的div，依此類推。每個塊只有一個div有活動類。如果一個塊已經有一個活動類的div，我點擊另一個div，點擊的新div將有活動類，舊的將失去它。 – Lewis

您正積極與該重置類名稱：

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>

來源

2017-02-22 11:57:04 Connum

我相信他只想標記每個區塊的一個元素。 –

啊，你可能是對的。從問題 – Connum

更新我的問題和小提琴使它工作「單選按鈕樣式」不是很清楚。 ;） – Connum

這裏有一個多 simplier解決方案，但使用jQuery。

$('.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>

來源

2017-02-22 12:08:20

無論如何，謝謝你，當我學習jQuery時，它會非常有用。 – Lewis

您可以通過在時間思考一行簡化問題。

你正在做的很好。你需要的唯一一件事就是存儲你的網格狀態的數據結構。

來源

2017-02-22 12:08:34

如何爲每個塊設置一個活動類？ [Javascript]

回答

相關問題