Improving jquery code

Asked

Viewed 37 times

2

I have a code in jquery that does the following, it creates a class after Hover, until then it is working normally, but as I will have to replicate this action elsewhere but will change the css properties of each Section, in the case of four, only that I didn’t want to have to replicate the same code over and over again, someone knows a way to improve this code so it doesn’t get repetitive ?

$('.bg_hover').hover(
function(){
    $(this).addClass('ativo');
},
function(){
    $(this).removeClass('ativo');
}
);

$('.bg_hover_dois').hover(
function(){
    $(this).addClass('ativo_dois');
},
function(){
    $(this).removeClass('ativo_dois');
}
);
javascript jquery front-end

  • Do you have control over HTML? do you really need to have different classes? Why not have the same class for everyone? And this class ativo does what? can’t do everything without jQuery? (i.e.: only with CSS)

  • Too bad you took an answer before you cleared up any doubts I put here. Next time I suggest to clarify the problem better, you will learn more and the question will be more useful to others who have the same problem

3 answers

0


Adds a unique ID to each of your elements, and in this function you take this id and add the class and remove it, depending on its ID.

And all the elements you want that have this behavior need to have the class bg_hover, only bg_hover

$('.bg_hover').hover(
function(){
    var id = $(this).attr("id");
    $(this).addClass('ativo'+ id);
},
function(){
    var id = $(this).attr("id");
    $(this).removeClass('ativo' + id);
}
);

So you don’t have to replicate, just change the id of each element you want to have this behavior

  • 1

    Thanks, that’s what I wanted

0

Make a função you receive as a parameter:

1- The elemento to be modified.

2 - The class of elemento.

Would look like this:

function ModificaElemento(element, classe) {
  $(element).hover(
    function(){
        $(element).addClass(classe);
    },
    function(){
        $(element).removeClass(classe);
    }
  );
}

ModificaElemento(".bg_hover", 'ativo');
ModificaElemento(".bg_hover_dois", 'ativo');
.ativo {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg_hover"> Ativo  </div> <br>
<div class="bg_hover_dois"> Ativo 2 </div>

The call of the function: ModificaElemento(elemento, classe)

  • Dear downvote, if you can explain what is wrong I would be grateful.

-1

You wouldn’t need Javascript for this, you can solve only with HTML and CSS:

HTML

<a href="#" class="active">meu link</a>
<a href="#" class="active2">meu link 2</a>

CSS

.active:hover {
    text-decoration: none;
}

.active2:hover {
    color: yellow
}

But if you need or want to use Javascript and jQuery can use the toggleClass http://api.jquery.com/toggleclass/

It would look something like this:

HTML

<a href="#" data-class="active" class="link-hover">meu link</a>
<a href="#" data-class="active2" class="link-hover">meu link 2</a>

JAVASCRIPT

$(".link-hover").hover(function(){
      $(this).toggleClass($(this).data('class'));
});

CSS

.active {
    text-decoration: none;
}

.active2 {
    color: yellow
}

Then the classes you can assemble as needed, and just change the attribute data-class

Browser other questions tagged javascript jquery front-end

You are not signed in. Login or sign up in order to post.