0

私は自分のウェブサイトに 3 つの div を設定しています。現在、CSS3 を使用して、背景色を変更して各 div を 5 秒間強調表示しています。したがって、最初の div が 5 秒間ハイライトされ、次に 2 番目、3 番目がハイライトされます。Javascriptで同じことを達成できますか?

私のhtmlは

<a href=""><div class="highlight" id="caption2">
Text1
</div></a>
<a href=""><div class="highlight" id="caption3">
Text2</div></a>
<a href="">
<div class="highlight" id="caption4">
Text3</div></a>

JS

      $("div.highlight").each(function (i) {
    var $self = $(this);
    setTimeout(function () {
        $self.removeClass("highlight")
        $self.addClass("caption");
        setTimeout(function () {
         $self.addClass("highlight");
            $self.removeClass("caption");
        }, 1000);
    }, i * 1000);
});

CSS

#caption2 {
    position:absolute;
    top:10px;
    left:-20px;
    z-index:50;
    padding-left:10px;
    padding-right:20px;
    padding-top:15px;
    padding-bottom:15px;
    color:#fff;
    font-family: 'Droid Sans', sans-serif;
    overflow:hidden;

}
#caption3 {
    position:absolute;
    top:70px;
    left:-20px;
    z-index:70;
    padding-left:10px;
    padding-right:20px;
    padding-top:15px;
    padding-bottom:15px;
    color:#fff;
    font-family: 'Droid Sans', sans-serif;
        overflow:hidden;


}
#caption4 {
    position:absolute;
    top:130px;
    left:-20px;
    z-index:50;
    padding-left:10px;
    padding-right:20px;
    padding-top:15px;
    padding-bottom:15px;
    color:#fff;
    font-family: 'Droid Sans', sans-serif;
        overflow:hidden;


}

.highlight {
    background-color:#000;
}
.caption {
    background-color:#f1583c;   
    color:yellow;   
}
4

1 に答える 1

0

もちろん！これより簡単なものはありません:

var divs = document.getElementsByTagName("div")

for(var i = 0; i < divs.length; i++) {
    setTimeout(function(n){
        divs[n].className = "highlight";
    }, i * 1000, i);
}

http://fiddle.jshell.net/e4Qv4/

または、より jQuery 風にしたい場合は、次のようにします。

$("div").each(function(i){
    var self = this;
    setTimeout(function(){
        self.className = "highlight";
    }, i * 1000);
});

http://fiddle.jshell.net/e4Qv4/1/

アップデート

あなたの主な問題はcss-selectorの特異性です... IDはクラスよりも高いレートを取得します。もう1つは、あなたが私の解決策を誤解していることです。jQuery に組み込まれている Sizzle-Selector エンジンについて少し読んでください。

于 2013-06-10T17:07:01.120 に答える