일시적으로 div 배경색을 변경하려면 setTimeout을 사용하십시오

4 개의 div 각각을 반복하고 색상을 녹색으로 변경하여 원본으로 되돌리고 다음으로 이동하기 전에 효과를 만들려고합니다. 지금은 색상을 영구히 변경하는 것입니다. 이 문제를 해결하는 방법을 잘 모르겠습니다. 그래서 이전의 각 요소를 올바르게 삭제하기 위해 '삭제'하기 때문에 색상이 다음으로 이동하기 전에 다시 변경됩니다. 나는 아마도 일곱 가지 일을 잘못하고 있으며, 조언을 주시면 감사하겠습니다.일시적으로 div 배경색을 변경하려면 setTimeout을 사용하십시오

는 다음 작업 JSBin입니다 : https://jsbin.com/puricazuxa/4/edit?html,css,js,output

자바 스크립트 :

arrayCount=[1,2,3,4]; 
var secondPrint = function(){ 
    setTimeout(function(){ 
if (arrayCount.length>0){ 
     $("#button"+arrayCount[0]).attr("class", "sButton2"); 

    arrayCount.shift(1); 
    secondPrint(); 
    } 
} ,1000); 
    }; 

secondPrint();

CSS :

body { 
    background-color: rgb(200,200,200); 
    font-family: "Arial"; 

} 
.sButton{ 
    height: 50px; 
    width: 50px; 
    margin: 5px; 
    padding: 10px; 
    border: 2px solid black; 
    display:inline; 
    background-color: rgb(50,100,100); 
} 
.sButton2{ 
    height: 50px; 
    width: 50px; 
    margin: 5px; 
    padding: 10px; 
    border: 2px solid black; 
    display:inline; 
    background-color: rgb(100,200,100); 
}

HTML :

<head> 
<script src="https://code.jquery.com/jquery-3.0.0.js"></script> 


</head> 
<body> 
<!-- Main page placeholders --> 

<br/> 
<br/> 
<div class = "sButton" id="button1">1</div> 
<div class = "sButton" id="button2">2</div> 
<div class = "sButton" id="button3">3</div> 
<div class = "sButton" id="button4">4</div>

출처

2016-07-10 garson

팁 : 1)() var''않고 암시 적 전역을 사용하지 마십시오. 2) 요소는 둘 이상의 클래스를 가질 수 있으므로'attr ('class') 대신 jQuery에서'addClass'와'removeClass'를 사용해야합니다. 당신은 또한 이것을 이용하여 반복을 줄이기 위해 CSS를 변경해야합니다. – gcampbell

팁 주셔서 감사합니다! 나는 addClass와 removeClass를 잊었다. 감사합니다. – garson

당신의 논리가 여기에 약간의 결함이있다. 보다 나은 접근 방법은 setInterval()을 사용하여 매초마다 버튼의 상태를 업데이트하고 각 함수 호출시 다음 상태로 이동하는 것입니다. 이 시도 :

var secondPrint = function() { 
    var $buttons = $('.sButton'); 
    var $active = $buttons.filter('.sButton2'); 
    $active = (!$active.length || $active.is(':last')) ? $('.sButton:first') : $active.next(); 
    $buttons.removeClass('sButton2'); 
    $active.addClass('sButton2'); 
}; 

setInterval(secondPrint, 1000) 
secondPrint();

Example fiddle

어떻게 내가 그들 모두를 통해 하나의 반복 후 중지해야합니까? 내가 방금 간격을 취소 논리 점검을 개정 할 필요가있는 경우 영원히

을에 가고 싶지 않았기 때문에 나는에서는 setInterval()을 사용하지 않았다면이 같은 :last 조건 조회수 :

var interval; 
var secondPrint = function() { 
    var $buttons = $('.sButton'); 
    var $active = $buttons.filter('.sButton2'); 
    $buttons.removeClass('sButton2'); 
    if ($active.is(':last')) { 
     clearInterval(interval); 
     return; 
    } 

    $active = !$active.length ? $('.sButton:first') : $active.next(); 
    $active.addClass('sButton2'); 
}; 

interval = setInterval(secondPrint, 1000) 
secondPrint();

Updated fiddle

출처

2016-07-10 16:28:44

이것은 훌륭합니다.하지만 모두를 통해 한 번 반복 한 후에 멈추게하려면 어떻게해야합니까? 나는 그것이 영원히 계속되기를 원하지 않기 때문에 setInterval()을 사용하지 않았다. – garson

신경 쓰지 마라. clearInterval()을 사용하여 알아 냈다. 감사! – garson

문제 없으니 기꺼이 도와주세요. 어쨌든 내 대답을 업데이트했습니다. –

일시적으로 div 배경색을 변경하려면 setTimeout을 사용하십시오

답변

관련 문제