Good day. I wrote such code, but I am sure that it was written far from perfect. Can you please tell how to cut it?

$("#text-chords a").on("mouseover", function(){ var hoverChord = $(this).html(), activeChord = $(".tab_chords [data-chord-tab='"+ hoverChord +"']"); activeChord.css("border-color", "red"); //Навел мышь - такой цвет }); $("#text-chords a").on("mouseout", function(){ var hoverChord = $(this).html(), activeChord = $(".tab_chords [data-chord-tab='"+ hoverChord +"']"); activeChord.css("border-color", "#ddd"); //Убрал мышь - такой цвет });
  • one
    to remove the code when you remove the mish .. just set the default css generally highlight when the cursor on the element can be done on pure css .. and will work faster - Volodymyr

1 answer 1

I would do this (Do not use colors in JS, where it is more difficult to change them. toggleClass c toggleClass combines 2 functions into one):

 $("#text-chords a").hover(function() { var hoverChord = $(this).html(), activeChord = $(".tab_chords [data-chord-tab='" + hoverChord + "']"); activeChord.toggleClass("active") }); 
 .tab_chords > div { border: 1px solid #ddd; margin: 5px; } .tab_chords > div.active { border-color: red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="text-chords"> <a href="#">Chord1</a> <a href="#">Chord2</a> </div> <div class="tab_chords"> <div data-chord-tab='Chord1'>Chord1</div> <div data-chord-tab='Chord2'>Chord2</div> </div>

  • Thank you) This is a good decision!) - Victor Victor