CODEWITHSUNDEEP
javascriptonclickhovermouseovermouseout
Emily Kendall Shortell
Emily Kendall Shortell

Reputation: 91

static, hover, click, mouseout when you click on something else

i am designing a timeline where when you hover over an image, it changes to another image, and when you click on it, it changes to yet another image. then when you click on a different portion of the timeline, it turns off what you just had clicked on. can anyone help me with this?

Here is what i have so far.

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

Upvotes: 2

Views: 902

Answers (1)

Andrew Li
Andrew Li

Reputation: 57972

You need to iterate through the list and disable those that aren't supposed to be active. Try this:

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

This will iterate through the nodeList of all bullets, then will remove active classes on the bullets that shouldn't be active. Here is a snippet:

$(".bullet").click(function() {
    var selBullet = $(this),
    	bullets = document.getElementsByClassName("bullet");
    selBullet.addClass("activeBullet");
    for(var i = bullets.length - 1; i >= 0; --i) {
        if(!selBullet.is($(bullets[i]))) {
      	    $(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>

Upvotes: 2

Related Questions