Запутался в JS скрипте, как лучше сделать?

207

27 июля 2017, 00:15

Сам скрипт https://jsfiddle.net/oyhvy9wf/

var chairs = document.getElementById("tab");
var n = 0;
var active = chairs.onmouseover = function(e) {
    document.getElementById("test1").innerHTML = 'Наведено на ' + e.target.id; var n = 1; var nid = e.target.id;
  if(n > 0){
    document.getElementById("test2").innerHTML = 'Наведено на '+nid;
  }
};

Идея была в том, что при наведении на раз, два, три - каждая надпись меняла цвет на красный и обратно на дефолтный, когда ни на одну из них курсор не наведён. Но возникли сложности:

Непонятно, что лучше использовать в данном случае - функцию, функциональное выражение или объект с замыканием каким ни будь
id="tab", с одной стороны, помогает находить объекты внутри группы, с другой, стороны так же забивает вывод собой, что не гуд, хотелось бы отслеживать не его самого, а только дочерние объекты
Без mouseout все свойства остаются после удаления мышки, но поставить его корректно никак не получается

Как в этом случае лучше выстроить архитектуру скрипта?

Answer 1

Думаю, что с помощью jQuery это делается гораздо проще

$("#tab>div").hover(function(){ 
    innerText = $(this).html(); 
    $("#out").text(innerText); 
    $(this).addClass("red"); 
},function(){ 
    $(this).removeClass("red"); 
});

.red { 
  color: red; 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div id="tab"> 
  <div>раз</div> 
  <div>два</div> 
  <div>три</div> 
</div> 
<br><div id="out"></div>