0

一部の JavaScript コードによって制御されている CSS アニメーションがありますが、割り当てられているすべてのセクションにアニメーションが適用されていません。div から形成されたリストがありますが、アニメーションは最初のリストにのみ影響します。同じIDを持つすべてのセクション、この場合は「ダウンロード」に適用する方法について何か考えはありますか?

コードは次のとおりです。

<script language="javascript">
    window.onload = function() {
    var btn = document.getElementById("download");
    btn.addEventListener("click", function(e) {
    this.className = "animated";
});

btn.addEventListener("webkitAnimationEnd", fadeOutUpEnd, false);
btn.addEventListener("oanimationend", fadeOutUpEnd, false);
btn.addEventListener("animationend", fadeOutUpEnd, false);
}

function fadeOutUpEnd(e) {
    e.currentTarget.className = "";
}
</script>

CSSアニメーションは次のとおりです。

.animated { 

}
.animated {
-webkit-animation:fadeOutUp 1s;
-moz-animation:fadeOutUp 1s;
-o-animation:fadeOutUp 1s;
-ms-animation:fadeOutUp 1s;
animation:fadeOutUp 1s;
}

@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}

100% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
}
@-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}

100% {
opacity: 0;
-moz-transform: translateY(-20px);
}
}
@-o-keyframes fadeOutUp {
0% {
opacity: 1;
-o-transform: translateY(0);
}

100% {
opacity: 0;
-o-transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}

100% {
opacity: 0;
transform: translateY(-20px);
}
}

.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}

HTML は次のとおりです。

<div class="list_block">
        <!-- ******** Block Logo ******** -->  
            <section id="section_1">
                    <img name="SLogo" src="images/ASC.jpg" width="100%" height="100%" alt="" />
            </section>
            <!-- ******** Block Title & Description ******** -->  
              <section id="section_2">
                    <section id="title">
                        Advanced SystemCare
                    </section>
                <section id="description">
                        Advanced SystemCare 6 Free takes a one-click approach to protect, repair, clean, and optimize your PC. It's easy to use and 100% safe with no adware, spyware, or viruses.
                </section>
              </section>
            <!-- ******** Block Version ******** -->  
                <section id="section_3">
                    <section id="version">
                        VERSION:
                    </section>
                    <section id="vnumber">
                        6.2.0
                    </section>
                <br />
            <!-- ******** Block Color ******** -->
                    <img name="color" src="images/Ranks/l-m.jpg" width="100" height="20" alt="" />
                <br />
                <br />
            <!-- ******** Block Date ******** -->  
                    <section id="date">
                        DATE:
                    </section>
                    <section id="dnumber">
                        6/13/2013
                    </section>
                </section>
            <!-- ******** Block Download Links ******** -->  
                <section id="section_4">
                    <a href="software/ASC.zip">
                    <section id="download" title="Download ASC">
                        Download
                    </section>
                </a>
                 <br />
                    <a href="http://www.iobit.com/advancedsystemcareper.php#none">
                        <section id="visit" title="Visit the ASC Website">
                            Visit Site
                        </section>
                    </a>
                </section>
          </div>
         <br />




            <div class="list_block">
            <!-- ******** Block Logo ******** -->  
                <section id="section_1">
                    <img name="SLogo" src="images/ATFCleaner.jpg" width="100%" height="100%" alt="" />
                </section>
            <!-- ******** Block Title & Description ******** -->  
              <section id="section_2">
                    <section id="title">
                        ATF Cleaner
                    </section>
                <section id="description">
                        ATF Cleaner will clean out your temp folder in a quick and safe manor. Recommended for Windows XP but has had success with Vista and 7.
                </section>
              </section>
            <!-- ******** Block Version ******** -->  
                <section id="section_3">
                    <section id="version">
                        VERSION:
                    </section>
                    <section id="vnumber">
                        3.0.0.2
                    </section>
                <br />
            <!-- ******** Block Color ******** -->
                    <img name="color" src="images/Ranks/l.jpg" width="100" height="20" alt="" />
                <br />
                <br />
            <!-- ******** Block Date ******** -->  
                    <section id="date">
                        DATE:
                    </section>
                    <section id="dnumber">
                        6/13/2013
                    </section>
                </section>
            <!-- ******** Block Download Links ******** -->  
                <section id="section_4">
                    <a href="software/ATFCleaner.exe">
                        <section id="download" title="Download ATF-Cleaner">
                            Download
                        </section>
                    </a>
                 <br />
                    <a href="http://www.atribune.org/?option=com_content&task=view&id=25&Itemid=25">
                        <section id="visit" title="Visit the ATF-Cleaner Website">
                            Visit Site
                        </section>
                    </a>
                </section>
            </div>
         <br />
4

1 に答える 1

0

getElementById は ID に基づいて単一の要素を返すため、最初は document.getElementById の代わりに document.getElementsByClassNameの使用を推奨することを考えていました。

ID は要素を識別するためのものであり、一意である必要があるため、同じ ID を持つ要素を複数持つべきではありません (こちらを参照)。

一方、 getElementsByClassName は配列を返すため、反復する必要があります。

あなたの場合、返された要素にクラス名を指定したいので、このメソッドは役に立ちません。特定のクラス名を事前に設定できれば、これらの要素に対して JavaScript 操作を実行する必要はありません。

ただし、これらの要素はすべて SECTION タグであるため、document.getElementsByTagNameを使用できます。

HTML の場合 - 各要素の ID にカウンターをサフィックスとして設定し、それらがすべて一意になるようにします (ページがサーバー コードによって動的に生成される場合は、サーバー コードを変更する必要があります)。

次に、結果の配列を JavaScript で反復処理して、「ダウンロード」の ID プレフィックスを確認します。true の場合、クラス名を「アニメーション」に設定します。

window.onload = function() {
    var sections = document.getElementsByTagName("section");
    for(i in sections)
    {
        var btn = sections[i];
        if (btn && btn.getAttribute)
        {
            var id = btn.getAttribute('id');
            if (null != id && 0 == id.indexOf("download"))
            {
                btn.addEventListener("mouseOver", function(e) { this.className = "animated"; });
                btn.addEventListener("webkitAnimationEnd", fadeOutUpEnd, false);
                btn.addEventListener("oanimationend", fadeOutUpEnd, false);
                btn.addEventListener("animationend", fadeOutUpEnd, false);
            }
        }
    }
};
于 2013-08-15T20:35:17.140 に答える