何かをクリックすると静的、ホバー、クリック、マウスアウト

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

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

リストを繰り返して、アクティブではないものを無効にする必要があります。これを試してみてください：

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

これは、すべての弾丸のnodelistとを反復処理しますが、その後、アクティブであってはならない弾丸上のアクティブなクラスを削除します。ここでは抜粋です。

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