JavaScript - 單擊另一個元素后將元素恢復為原始樣式

Question

所以我正在構建一個日歷程序，我希望用戶能夠選擇一天。 使用<table> ，通過將className="NewStyle"到框中， <td>突出顯示。 我希望在單擊另一個單元格后該單元格恢復正常，但它仍然保持其新樣式。

當單擊另一個單元格時，如何使JS將任何未單擊的單元格還原為正常？

這是一個JSFiddle 。 謝謝你的幫助！

HTML

細胞看起來像這樣：

<td id="td_4" onclick="change(4)">4</td>
<td id="td_5" onclick="change(5)">5</td>
<td id="td_6" onclick="change(6)">6</td>

單擊td_4將成功更改樣式。 但是單擊td_6也會成功更改樣式，但是將td_4保留為新樣式而不是還原它。

JavaScript的

function change(x) {
    document.getElementById("td_" + x).className = "selected";
}

Answer 1

只需跟蹤您單擊的元素並將其取消分類即可。 小提琴

var previousEl
function change(x) {
  if (previousEl) previousEl.className = ""
  previousEl = document.getElementById("td_" + x)
  previousEl.className = "selected"
}

更新：值得一提的另一件事是你可以利用事件冒泡，這樣你的父容器就可以監聽事件，從事件對象中獲取被點擊元素的id。 更新小提琴

var previousEl
function change(event) {
  if (previousEl) previousEl.className = "";
  previousEl = document.getElementById(event.target.id)
  previousEl.className = "selected";
}

並在您的HTML中刪除所有<td onclick="change()">並將其放在父級，傳遞事件：

<table onclick="change(event)">

Answer 2

這就是我將如何實現您正在尋找的效果，但首先是幾個注釋：

1. 不要使用內聯JavaScript
2. 如果你必須重復大量的代碼，它可能會以一種更簡單的方式完成。 （讀： 干 ）

我們只在這個腳本中使用兩個事件監聽器。

第一個事件偵聽器將使用委托將所選類分配給單擊的元素。 當您單擊某個元素時，該事件將“冒泡”通過所單擊的元素，一直向上通過DOM。 所以我們可以聽一個共同的父元素，然后檢查事件的起源。

這里我們要檢查元素是否是<td>元素，以及它是否沒有類no_border 。 然后我們想使用Event.stopPropagation()來阻止click事件冒泡到公共父級，這將避免第二個偵聽器出現一些並發症。 我們要做的最后一項檢查是查看被點擊的元素是否是所選元素。 如果是，那么我們跳過下一步並刪除所選的類。

我們使用公共變量來存儲單擊的元素，直到單擊下一個元素。 在下一個單擊事件時，如果存在元素，我們將從存儲元素的類列表中刪除所選類。 然后我們將新單擊的元素分配給公共變量並為其提供所選的類。

第二個事件偵聽器將偵聽整個文檔的單擊事件。 如果存在選定元素，則應隱藏該元素。 現在的訣竅是，因為如果被點擊的元素是<td>元素並且沒有類no_border ，我們停止了從表中傳播click事件，我們不必再次比較被點擊的元素為了不與第一個事件監聽器發生沖突。 我們需要檢查的是是否存在選定的元素，如果是，則刪除該類並重置公共變量。

 var selected; document.getElementById( 'calendar' ).onclick = function( e ) { var c = e.target; if( c.tagName === 'TD' && c.className.indexOf( 'no_border' ) === -1 ) { e.stopPropagation(); if( c.className.indexOf( 'selected' ) === -1 ) { if( selected ) selected.className = selected.className.replace( /\\s?selected/, '' ); selected = c; selected.className += ' selected'; } else c.className = c.className.replace( /\\s?selected/, '' ); } } document.body.onclick = function( e ) { if( selected ) { selected.className = selected.className.replace( /\\s?selected/, ''); selected = false; } } 

 td { padding:4px; border:solid #ccc 1px; text-align: center; } td::after { /* I added this to keep a consistent width */ content: ""; display: block; width: 2em; } .no_border { border: 1px solid transparent; } .selected { border: solid #69F 1px; } 

 <table id="calendar"> <thead> <tr><td class="no_border">Sun</td><td class="no_border">Mon</td><td class="no_border">Tue</td><td class="no_border">Wed</td><td class="no_border">Thu</td><td class="no_border">Fri</td><td class="no_border">Sat</td></tr> </thead> <tbody> <tr><td class="no_border" colspan="6"></td><td>1</td></tr> <tr><td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td></tr> <tr><td>9</td> <td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr> <tr><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td></tr> <tr><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td></tr> <tr><td>30</td><td>31</td></tr> </tbody> </table> 

Answer 3

沒有太多簡單的解決方案，但嘗試：

function change(x) {
    document.getElementsByTagName('td').forEach(function (el) {
        if (el.className === 'selected') {
            el.className = '';
        }
    });
    document.getElementById("td_" + x).className = "selected";
}

要么

function change(x) {
    document.getElementsByClassName('selected').forEach(function (el) {
        el.className = '';
    });
    document.getElementById("td_" + x).className = "selected";
}

Answer 4

使用querySelector確定當前檢查的td ：

function change(x) {
  var sel= document.querySelector('td.selected');
  if(sel) sel.className= '';
  document.getElementById("td_" + x).className = "selected";
}

小提琴1

您還可以使用table上的一個單擊處理程序替換所有內聯單擊處理程序。 確保事件的目標是td （ e.target.tagName === 'TD' ），其中包含一個數字（ !isNaN(e.target.textContent ）：

document.querySelector('table').addEventListener('click', function(e) {
  if(e.target.tagName === 'TD' && !isNaN(e.target.textContent)) {
    var sel= document.querySelector('td.selected');
    if(sel) sel.className= '';
    e.target.className= 'selected';
  }
});

小提琴2