0

ページの下部に 3 つの画像がある html ドキュメントを作成しようとしています。これらの画像にはすべて枠線があります。1 日の特定の時点で、画像に異なる色の境界線が表示されるため、最初の 1 つは緑で始まり、他の 2 つは赤になり、次に中央が緑になり、外側の 2 つは赤になります。

これらの境界線の色を変更するためのコードを取得するのに多くの問題を抱えています。条件文と組み合わせて機能させることは言うまでもありません。

これは私のindex.htmlセクションがどのように見えるかですそのsrcは画像です

<div id="shippingLogos">
    <img src="images/FedExground.jpg" alt="FedEx Ground" class="shipGround"/>
    <img src="images/UPS.jpg" alt="UPS" class="shipUPS" />
    <img src="images/FedEx_Express.png" alt="FedEx Express" class="shipExpress" />
</div>

クラスはstyle.css、対応するクラス名が使用されているファイルに移動します

img.shipGround
{
    border-style: solid;
    border-width: 10px;
    float: left;
    height:300px;
    margin: 30px 38px 30px 38px;
    width:25%;
}

私はすでに境界線を配置しており、jscript/jquery を使用してその境界線の色を変更するだけです。皆さんがどこに置くべきだと思うか知りたかったので、境界線の色を完全に省略しました.

私はいくつかの異なるアプローチを試しましたが、それを機能させることができません。アドバイスをいただければ幸いです。

4

3 に答える 3

1

そのように簡単です：http://jsbin.com/uqeyeg/3/edit 

var idx = Math.floor( (new Date().getHours()/24) * 3 );
$("#shippingLogos img").eq( idx ).addClass('green');

idx0, 1, 21 日の時間帯(24h/8h=3parts)に応じて戻ります。その値を使用すると、jQueryメソッドを使用し
て子を簡単にターゲットにすることができます。img.eq()

HTML : (クラスはまったく必要ありません :) 万歳! )

<div id="shippingLogos">
    <img src="images/FedExground.jpg" alt="FedEx Ground" />
    <img src="images/UPS.jpg" alt="UPS" />
    <img src="images/FedEx_Express.png" alt="FedEx Express" />
</div>

CSS :

#shippingLogos img {
  border: 10px solid red; /* MAKE RED DEFAULT */
  float: left;
  height:300px;
  margin: 30px 3%;
  width:24%;
}

.green{
  border: 10px solid green !important; /* APPLIED BY jQuery */
}

EDIT： DavidThomasの提案による - 言及する価値がある

コードをより柔軟にする必要がある場合など: 6 つの画像があり、1 日を 6 つに分割したい場合:

var $images = $("#shippingLogos img"),
    NofImages = $images.length,
    idx = Math.floor( (new Date().getHours()/24) * NofImages );

$images.eq( idx ).addClass('green');

結論: ご覧のとおり、 古い
ものを置き換えて、時間帯の数を表すを使用しました。 3NofImages

于 2013-06-11T22:37:01.063 に答える
0

ハイライトされた色のクラスを作成することをお勧めします。

.highlight {
    border-color: red;
}

次に、Javascript を使用してそのクラスを設定します (jQuery を使用するとします)。

var date = new Date();
var hours = date.getHours();
$("#shippingLogos").children().removeClass('highlight');
if(hours >= 0 && hours < 8){
    $("#shippingLogos").children().eq(0).addClass('highlight');
}else if(hours >=8 && hours < 16){
    $("#shippingLogos").children().eq(1).addClass('highlight');
} else {
    $("#shippingLogos").children().eq(2).addClass('highlight');
}
于 2013-06-11T22:14:02.393 に答える