zwei Bild Swaps ständig

Question

.question1sidebar{ 
 
\t top: 150px; 
 
\t left: 65px; 
 
\t position: absolute; 
 
\t font-weight: bold; 
 
\t font-size: 40px; 
 
\t border-bottom: solid; 
 
\t border-color: #5D5C5A; 
 
} 
 
.question2sidebar{ 
 
\t top: 220px; 
 
\t left: 65px; 
 
\t position: absolute; 
 
\t font-weight: bold; 
 
\t font-size: 40px; 
 
\t border-bottom: solid; 
 
\t border-color: #5D5C5A; 
 
} 
 
.question3sidebar{ 
 
\t top: 290px; 
 
\t left: 65px; 
 
\t position: absolute; 
 
\t font-weight: bold; 
 
\t font-size: 40px; 
 
\t border-bottom: solid; 
 
\t border-color: #5D5C5A; 
 
} 
 
.question4sidebar{ 
 
\t top: 360px; 
 
\t left: 65px; 
 
\t position: absolute; 
 
\t font-weight: bold; 
 
\t font-size: 40px; 
 
\t border-bottom: solid; 
 
\t border-color: #5D5C5A; 
 
} 
 
.question5sidebar{ 
 
\t top: 430px; 
 
\t left: 65px; 
 
\t position: absolute; 
 
\t font-weight: bold; 
 
\t font-size: 40px; 
 
\t border-bottom: solid; 
 
\t border-color: #5D5C5A; 
 
} 
 
.question6sidebar{ 
 
\t top: 500px; 
 
\t left: 65px; 
 
\t position: absolute; 
 
\t font-weight: bold; 
 
\t font-size: 40px; 
 
\t border-bottom: solid; 
 
\t border-color: #5D5C5A; 
 
} 
 
.question7sidebar{ 
 
\t top: 570px; 
 
\t left: 65px; 
 
\t position: absolute; 
 
\t font-weight: bold; 
 
\t font-size: 40px; 
 
\t border-bottom: solid; 
 
\t border-color: #5D5C5A; 
 
} 
 
.left{ 
 
\t float: left; 
 
\t width: 150px; 
 
\t background-color: white; 
 
\t height: 100%; 
 
\t padding: 300px 100px; 
 
\t border-right: solid #918A88; 
 
\t border-bottom: solid #7C7776; 
 
}

So bin ich, eine Website, die 7 Stufen enthält und auf der Seite stelle ich so etwas wie Stufe 1-7 und was ich will ist im Grunde, was immer der Benutzerebene ist Es wird ein graues Häkchen angezeigt, das zu einem grünen Häkchen wechselt, und ein viertes zeigt an, dass sie sich auf dieser Ebene befinden. Wenn sie mit einem Klick auf die nächste Ebene weitergehen, blinkt die nächste Ebene (graues Häkchen wechselt zu grün) zurück zum grauen Häkchen markieren)

function question1(){ 
 
\t if(var i=0; i>2; i++){ 
 
\t var greycheckmark = document.getElementById("greycheckmark"); 
 
\t this.src = "img/green.png" 
 
    i++ 
 
\t } 
 
    
 
}

<div class="left"> 
 
\t <div class="question1sidebar"> 
 
\t \t Question1 
 
</div> 
 
<img src="img/grey.png" id="greycheckmark" style="max-width: 100px; max-height: 75px; position: absolute; top: 143px; left: 230px;" onload="question1()"> 
 
\t <div class="question2sidebar"> 
 
\t \t Question2 
 
</div> 
 
\t <div class="question3sidebar"> 
 
\t \t Question3 
 
</div> 
 
\t <div class="question4sidebar"> 
 
\t \t Question4 
 
</div> 
 
\t <div class="question5sidebar"> 
 
\t \t Question5 
 
</div> 
 
\t <div class="question6sidebar"> 
 
\t \t Question6 
 
</div> 
 
\t <div class="question7sidebar"> 
 
\t \t Question7 
 
</div> 
 
</div>

Was ich versuchte, mit Javascript zu tun ist eine if und else-Anweisung mit Inkrementierer zu tun, so wie wenn ich gleich 0 ist, dann wird es einmal erhöht und ein anderes Bild anzuzeigen dann verringern und das Originalbild anzuzeigen

Answer 1

Sie müssen die Funktion setInterval in js verwenden, um die grauen und grünen Bilder umzuschalten.

Hier ein Beispiel Javascript, das ich schrieb:

//We use this to check if the image is grey or green 
var active = false; 

    setInterval(function(){ 
    var greycheckmark = document.getElementById("greycheckmark"); 

    //If it is active(green) set it to grey 
    if(active) 
    { 
     //You will need to replace this image with your grey image 
     greycheckmark.src = "http://www.clker.com/cliparts/9/d/J/p/D/g/check-grey-hi.png"; 
    } 
    else 
    { 
     //You will need to replace this image with your green image 
     greycheckmark.src = "https://openclipart.org/image/2400px/svg_to_png/167549/Kliponious-green-tick.png" 
    } 

    //change the state to the opposite (active -> inactive or vice versa) 
    active = !active 

    //This specifies the timeout of the function in milliseconds(The bigger the value the slower the change) 
    }, 500); 

Hier ist eine js Geige: https://jsfiddle.net/3kjusoaj/