statisch, schweben, klicken, mouseout, wenn Sie auf etwas anderes klicken

Question

ich entwerfe eine Zeitleiste, wo, wenn Sie den Mauszeiger über ein Bild bewegen, es zu einem anderen Bild ändert, und wenn Sie darauf klicken, ändert es sich zu einem anderen Bild. Wenn Sie dann auf einen anderen Teil der Timeline klicken, wird das ausgeschaltet, was Sie gerade angeklickt haben. Kann mir jemand dabei helfen?

Hier ist was ich bisher habe.

HTML:

<div class="all-bullets"> 
    <div class="bulletPlayer"> 
     <a class="bulletOne"></a><br /> 
    </div> 
    <div class="bulletPlayer"> 
     <a class="bulletTwo"></a><br /> 
    </div> 
    <div class="bulletPlayer"> 
     <a class="bulletThree"></a><br /> 
    </div> 
    <div class="bulletPlayer"> 
     <a class="bulletFour"></a><br /> 
    </div> 
</div> 

CSS:

.all-bullets { 
display: inline-block; 
vertical-align: top; 
width: 492px; 
margin-left: -41px; 
margin-top: 140px; 
} 
.bulletPlayer { 
position: relative; 
z-index: 9999; 
} 



/* BULLET ONE*/ 
.bulletOne { 
display: inline-block; 
width: 500px; 
height: 126px; 
background: url(images/dotOneUpState.png) no-repeat left top; 
} 

.bulletOne:hover 
{ 
background: url(images/dotOneHoverState.png) no-repeat left top; 
margin-left: -5px; 
margin-top: -3px; 
margin-bottom: 3px; 
} 
.bulletOne.active 
{ 
background: url(images/dotOneDownState.png) no-repeat left top; 
margin-left: -5px; 
margin-top: -3px; 
margin-bottom: 3px; 
} 



/* BULLET TWO*/ 
.bulletTwo { 
display: inline-block; 
width: 500px; 
height: 126px; 
background: url(images/dotTwoUpState.png) no-repeat left top; 
} 

.bulletTwo:hover 
{ 
background: url(images/dotTwoHoverState.png) no-repeat left top; 
margin-left: -3px; 
margin-top: -3px; 
margin-bottom: 3px; 
} 
.bulletTwo.active 
{ 
background: url(images/dotTwoDownState.png) no-repeat left top; 
margin-left: -3px; 
margin-top: -3px; 
margin-bottom: 3px; 
} 




/* BULLET THREE*/ 

.bulletThree { 
display: inline-block; 
width: 500px; 
height: 126px; 
background: url(images/dotThreeUpState.png) no-repeat left top; 
} 

.bulletThree:hover 
{ 
background: url(images/dotThreeHoverState.png) no-repeat left top; 
margin-left: -4px; 
margin-top: -3px; 
margin-bottom: 3px; 
} 
.bulletThree.active 
{ 
background: url(images/dotThreeDownState.png) no-repeat left top; 
margin-left: -4px; 
margin-top: -3px; 
margin-bottom: 3px; 
} 


/* BULLET FOUR*/ 
.bulletFour { 
display: inline-block; 
width: 500px; 
height: 123px; 
background: url(images/dotFourUpState.png) no-repeat left top; 
cursor: pointer; 
} 

.bulletFour:hover 
{ 
background: url(images/dotFourHoverState.png) no-repeat left top; 
margin-left: -3px; 
margin-top: -3px; 
margin-bottom: 3px; 
} 
.bulletFour.active 
{ 
background: url(images/dotFourDownState.png) no-repeat left top; 
margin-left: -3px; 
margin-top: -3px; 
margin-bottom: 3px; 
} 

Javascript:

$('.bulletOne').click(function(){ 
if($(this).hasClass('active')){ 
    $(this).removeClass('active') 
} else { 
    $(this).addClass('active') 
} 

});

$('.bulletTwo').click(function(){ 
if($(this).hasClass('active')){ 
    $(this).removeClass('active') 
} else { 
    $(this).addClass('active') 
} 
}); 

$('.bulletThree').click(function(){ 
if($(this).hasClass('active')){ 
    $(this).removeClass('active') 
} else { 
    $(this).addClass('active') 
} 
}); 

$('.bulletFour').click(function(){ 
if($(this).hasClass('active')){ 
    $(this).removeClass('active') 
} else { 
    $(this).addClass('active') 
} 
}); 

Answer 1

Sie müssen durch die Liste iterieren und diejenigen deaktivieren, die nicht aktiv sein sollen. Versuchen Sie folgendes:

$(".bullet").click(function() { //Click function 
    var selBullet = $(this), //Selected button 
     bullets = document.getElementsByClassName("bullet"); //bullets nodeList 
    selBullet.addClass("activeBullet"); //adding activeBullet class 
    for(var i = bullets.length - 1; i >= 0; --i) { //iterate through all 
     if(!selBullet.is($(bullets[i]))) { //check if same as selected 
      $(bullets[i]).removeClass("activeBullet"); //if not, remove class 
     } 
    } 
}); 

Dies wird den nodeList aller Kugeln durchläuft, dann entfernen aktive Klassen an den Kugeln, die nicht aktiv sein sollen. Hier ist ein Ausschnitt:

$(".bullet").click(function() { 
 
    var selBullet = $(this), 
 
    \t bullets = document.getElementsByClassName("bullet"); 
 
    selBullet.addClass("activeBullet"); 
 
    for(var i = bullets.length - 1; i >= 0; --i) { 
 
     if(!selBullet.is($(bullets[i]))) { 
 
     \t  $(bullets[i]).removeClass("activeBullet"); 
 
     } 
 
    } 
 
});

.bullet { 
 
    color: red; 
 
} 
 

 
.activeBullet { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="b"> 
 
    <a class="bullet activeBullet">Test_1</a> 
 
    </div> 
 
    <div class="b"> 
 
    <a class="bullet">Test_2</a> 
 
    </div> 
 
    <div class="b"> 
 
    <a class="bullet">Test_3</a> 
 
    </div> 
 
</div>