오늘의 시간에 따라 색상 변경

Question

페이지 아래쪽에 세 개의 이미지가있는 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> 

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

클래스는 다음 해당 클래스 이름이 사용되는 내 style.css 파일로 이동

은 이미 국경이처럼 내 index.html 섹션 모습입니다 그 자리에서 그리고 내가하려는 것은 jscript/jquery를 사용하여 테두리 색상을 변경하는 것입니다. 나는 당신이 내가 어디에 놓아야한다고 생각하는지 알고 싶었 기 때문에 경계 색을 완전히 버렸다.

나는 여러 가지 다른 접근법을 시도했으며 제대로 작동하지 못한다. 내가 강조 색상에 대한 클래스 생성 제안

Answer 1

: 다음

.highlight { 
    border-color: red; 
} 

을, 자바 스크립트를 사용하여 해당 클래스를 설정 (당신이 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'); 
} 

Answer 2

간단한과 : http://jsbin.com/uqeyeg/3/edit

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

은 ^{(24 시간/8 시간 = 3 부분)} 시간에 따라 0, 1, 2을 반환합니다.
이제이 값을 사용하여 img 자식을 쉽게 타겟팅 할 수 있습니다.이 경우 jQuery .eq() 메서드를 사용하십시오.

HTML : (전혀 수업 할 필요가 없습니다 :) huray!)

<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 */ 
} 

편집 :^{DavidThomas에 의해 제안 - 만약 당신이 코드를 더 유연 예를 확인해야합니다 경우}

을 언급 할 가치 : 6 개의 이미지가 있고 일을 6 단계로 나눌 수 있습니다 :,973,210

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

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

결론 : 우리가 단지 이전3을 교체하고, 일 - 부품의 수를 나타내는하는 NofImages을 사용 보았 듯이
.