如何使用Javascript刷新多個HTML元素

Question

我有一些複製X次的HTML。對於這個例子可以說3次。

HTML：

<tr id="flashingtr" class="flashingtr"> 
    <td>name</td> 
    <td>13</td> 
    <td>16:00 
    </td> 
</tr> 
<tr id="flashingtr" class="flashingtr"> 
    <td>name</td> 
    <td>13</td> 
    <td>16:00 
    </td> 
</tr> 
<tr id="flashingtr" class="flashingtr"> 
    <td>name</td> 
    <td>13</td> 
    <td>16:00 
    </td> 
</tr> 

而且我有一些JavaScript運行：

<script type="text/javascript"> 
    var flash = document.getElementById('flashingtr') 
    setInterval(function() { 
     flash.style.backgroundColor = (flash.style.backgroundColor == 'red' ? 'white' : 'red'); 
    }, 500); 
</script> 

現在這上面的JavaScript的作品，而是一個ID只能出現一次（在theorie）。所以我認爲這就是爲什麼只有第一個<tr>閃爍。

於是我嘗試了以下內容：

<script type="text/javascript"> 
    var flash = document.getElementsByClassName('flashingtr') 
    setInterval(function() { 
     flash.style.backgroundColor = (flash.style.backgroundColor == 'red' ? 'white' : 'red'); 
    }, 500); 
</script> 

但不起任何作用。

問題： 如何使用此代碼閃爍多個HTML元素？

Answer 1

它是因爲id是唯一的。所以JavaScript只會返回一個元素。

在你的情況下，這個元素;

<tr id="flashingtr" class="flashingtr"> 
    <td>name</td> 
    <td>13</td> 
    <td>16:00 
    </td> 
</tr> 

在你的第二個例子中，按類選擇元素。這將返回一個帶有元素列表的object。你必須循環通過objects。

在閱讀您的意見後，我想出了以下內容。 你必須在setInterval內定義for環路

這樣它就可以工作了，而且它們都會閃爍。

var flash = document.querySelectorAll('.flashingtr'); 
 

 
setInterval(function() { 
 
    for(var i = 0;i < flash.length;i++) { 
 
\t \t var selector = flash[i]; 
 
     selector.style.backgroundColor = (selector.style.backgroundColor == 'red' ? 'white' : 'red'); 
 
    } 
 
}, 500);

<table> 
 
    <tr class="flashingtr"> 
 
     <td>name</td> 
 
     <td>13</td> 
 
     <td>16:00 
 
     </td> 
 
    </tr> 
 
    <tr class="flashingtr"> 
 
     <td>name</td> 
 
     <td>13</td> 
 
     <td>16:00 
 
     </td> 
 
    </tr> 
 
    <tr class="flashingtr"> 
 
     <td>name</td> 
 
     <td>13</td> 
 
     <td>16:00 
 
     </td> 
 
    </tr> 
 
</table> 
 

 
<div class="test"> 
 
</div>

Answer 2

document.getElementByClassName不是一個函數，元素後，你應該使用document.getElementsByClassName

注意「s」：它返回一個數組。

然後你會通過你的元素的數組必須循環：

setInterval(function() { 

    var flashElements = document.getElementsByClassName('flashingtr'); 
    var i; 
    for (i=0;i<flashElements.length;i++) { 
     flashElements[i].style.backgroundColor = (flashElements[i].style.backgroundColor == 'red' ? 'white' : 'red'); 
    } 

}, 500); 

編輯： 我感動的setInterval函數裏面的循環。這樣，如果添加了「flashingtr」類的新TR文檔，它也會閃爍。

Answer 3

如何使用CSS動畫閃爍的效果呢？

const 
 
    selectElement = document.querySelector('#anim-select'); 
 

 
let 
 
    oldStyle = ''; 
 
    
 
function onAnimStyleChanged(event) { 
 
    const 
 
    rows = Array.from(document.querySelectorAll('tr')); 
 
    if (oldStyle !== '') { 
 
    rows.forEach(row => row.classList.remove(oldStyle)); 
 
    } 
 
    
 
    oldStyle = event.target.value; 
 
    if (oldStyle !== '') { 
 
    rows.forEach(row => row.classList.add(oldStyle)); 
 
    } 
 
    
 
} 
 

 
selectElement.addEventListener('change', onAnimStyleChanged);

@keyframes flashing-hard { 
 
    0% { background-color: white; } 
 
    49% { background-color: white; } 
 
    50% { background-color: red; } 
 
    100% { background-color: red; } 
 
} 
 

 
@keyframes flashing-soft { 
 
    0% { background-color: white; } 
 
    50% { background-color: red; } 
 
} 
 

 

 
table { 
 
    border-collapse: collapse; 
 
} 
 

 
.hard-flash > td { 
 
    animation-duration: 1000ms; 
 
    animation-name: flashing-hard; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 

 
.soft-flash > td { 
 
    animation-duration: 1000ms; 
 
    animation-name: flashing-soft; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
}

<table> 
 
    <tbody> 
 
    <tr id="flashingtr" class=""> 
 
     <td>name</td> 
 
     <td>13</td> 
 
     <td>16:00 
 
     </td> 
 
    </tr> 
 
    <tr id="flashingtr" class=""> 
 
     <td>name</td> 
 
     <td>13</td> 
 
     <td>16:00 
 
     </td> 
 
    </tr> 
 
    <tr id="flashingtr" class=""> 
 
     <td>name</td> 
 
     <td>13</td> 
 
     <td>16:00 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
<table> 
 

 
<label for="anim-select">Set animation style</label> 
 
<select id="anim-select"> 
 
    <option value="">Off</option> 
 
    <option value="soft-flash">Soft flash</option> 
 
    <option value="hard-flash">Hard flash</option> 
 
</select>