뭔가 다른 것을 클릭하면 정적, 마우스 오버, 클릭, 마우 스로우

Question

이미지 위에 마우스를 올리면 다른 이미지로 바뀌고 타임 라인을 클릭하면 다른 이미지로 바뀝니다. 타임 라인의 다른 부분을 클릭하면 방금 클릭 한 부분이 꺼집니다. 아무도 이것으로 나를 도울 수 있습니까?

내가 지금까지 가지고있는 것입니다.

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; 
} 

자바 스크립트 :

$('.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

목록을 반복하고 활성화되지 않아야하는 항목을 비활성화해야합니다. 이 시도 :

$(".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 
     } 
    } 
}); 

이 모든 총알의 노드 목록을 반복합니다 후 활성화되지해야 총알에 활성 클래스를 제거합니다.

$(".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>