CODEWITHSUNDEEP
javascriptjquery
Matthew Smart
Matthew Smart

Reputation: 1319

On mouse down change class but revert it on mouseup

When i click on a class i want to remove the class and add a new class to the element. Now when i release the mouse from the class i want to remove the new class added and replace with the old class.

This is only adding the new class but is not reversing the change when i take the mouse of.

<i class="fa fa-arrows"></i>


    $('.fa-arrows').mousedown(function(){
        $(this).removeClass('fa-arrows').addClass('fa-random');
    });

    $('.fa-random').on('mouseup',function(){
        $(this).removeClass('fa-random').addClass('fa-arrows');
    });

https://jsfiddle.net/873k5pgg/

Upvotes: 0

Views: 2905

Answers (4)

anthony-dandrea
anthony-dandrea

Reputation: 2813

You could set a variable to be true/false if it is clicked or not. Script will need to be altered if you're doing this multiple times on the same page.

var clicked = false;

$(document).on('mousedown', '.fa-arrows', function(){
    $(this).removeClass('fa-arrows').addClass('fa-random');
    clicked = true;
});

$(document).on('mouseup', function(){
    if (clicked) {
        clicked = false;
    	$('.fa-random').removeClass('fa-random').addClass('fa-arrows');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <i class="fa fa-arrows"></i>

Upvotes: 1

Kokos
Kokos

Reputation: 9121

The reason this doesn't work is because the events are set at the start, and the mouseup event is set to .fa-random which doesn't exist at that moment.

Like j08691 said you can use event delegation from the document, or you could put the event ons .fa and it should work too:

$('.fa').mousedown(function(){
    $(this).removeClass('fa-arrows').addClass('fa-random');
});

$('.fa').mouseup(function(){
    $(this).removeClass('fa-random').addClass('fa-arrows');
});

Upvotes: 1

Dominik Schreiber
Dominik Schreiber

Reputation: 2771

What your jQuery does when this code is executed is: it looks for all .fa-arrows and binds the function to mousedown and it looks for all .fa-random and binds the other function to mouseup. This happens once, it is not magically re-evaluated everytime any class/the DOM changes. (That is where React/AngularJS/... come into play.)

You either have to re-evaluate the binds manually whenever the classes change (in the bound functions), or bind both to the same elements (I'd go with the latter):

$('.fa-arrows')
  .on('mousedown', function() {
    $(this).removeClass('fa-arrows').addClass('fa-random');
  })
  .on('mouseup', function() {
    $(this).removeClass('fa-random').addClass('fa-arrows');
  });
.fa-arrows { text-decoration: underline; }
.fa-random { color: red; text-decoration: line-through; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="fa-arrows">mousedown me</p>

Edit: that said, why not just use css?

p { text-decoration: underline }
p:active { color: red; text-decoration: line-through; }
<p>mousedown me</p>

Upvotes: 3

j08691
j08691

Reputation: 207900

You can use event delegation:

$(document).on('mousedown', '.fa-arrows', function () {
    $(this).removeClass('fa-arrows').addClass('fa-random');
});
$(document).on('mouseup', '.fa-random', function () {
    $(this).removeClass('fa-random').addClass('fa-arrows');
});

jsFiddle example

Upvotes: 3

Related Questions