Подскажите как сократить код на jQuery (События)

241
09 февраля 2017, 02:13

Доброго времени суток. Написал такой код, но уверен что он написан далеко не идеально. Подскажите, пожалуйста как его сократить?

    $("#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"); //Убрал мышь - такой цвет
    });
Answer 1

Я бы делал так (Не использовать цвета в JS, где их сложнее менять. hover c toggleClass объединяет 2 функции в одну):

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

READ ALSO
jquery ajax добавление в массив

jquery ajax добавление в массив

Здравствуйте, не могу разобраться с тем, как получить последнее добавленное в массив значение

250
Birt скрытие таблиц, если dataset пустой

Birt скрытие таблиц, если dataset пустой

Здравствуйте, мне необходимо написать скрипт в birt, который будет скрывать определенную таблицу, если в ней не будет строк, то есть данных...

322
Как отправить картинку через ajax?

Как отправить картинку через ajax?

Суть в том, что на страницу savephp посылается POST запрос с картинкой и парочкой полей, а на странице main, с которой это сделали (form target="_blank" присутствует)...

334