複数のHTML要素をJavascriptでフラッシュする方法

Question

HTMLをX回コピーしました。この例では、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は1つの要素だけを返します。

あなたの場合、この要素は次のとおりです。

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

2番目の例では、クラスごとに要素を選択します。これにより、要素のリストでobjectが返されます。 objectsをループする必要があります。

あなたのコメントを読んだ後、私は次のことを考え出しました。 setInterval

のようにループを定義する必要があります。このようにすれば、すべてが点滅します。フラッシュ効果のためのCSSアニメーションを使用する方法について

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); 

EDIT： 私はのsetInterval関数内のループを移動しました。そうすれば、 'flashingtr'クラスを持つ新しいTRがドキュメントに追加された場合、それも点滅します。

Answer 3

どのように？

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>