Tengo tres cuadros a lo largo y una línea de texto debajo que cambia el texto según el cuadro sobre el que se coloca el cursor. HTML

<div style="display:inline-block;">
<div id="box1" class="outerbox">
</div>
<div id="box2" class="outerbox">
</div>
<div id="box3" class="outerbox">
</div>
</div>
<div style="display:block;">
  <p id="p1">
  Paragraph 1
  </p>
  <p id="p2">
  Paragraph 2
  </p>
  <p id="p3">
  Paragraph 3
  </p>
</div>

Y estoy ejecutando este script con él, que parece repetitivo como un aficionado.

$(document).ready(function() {
            $("#box1").hover(function() {
                $("#p1").addClass("show");
            }, function() {
                $("#p1").removeClass("show");
            });

      $("#box2").hover(function() {
                $("#p2").addClass("show");
            }, function() {
                $("#p2").removeClass("show");
            });

      $("#box3").hover(function() {
                $("#p3").addClass("show");
            }, function() {
                $("#p3").removeClass("show");
            });
        });

¿Cómo podría codificar mejor el script para hacer la misma función? Gracias. FIDDLE

0
TragicWhale 30 ene. 2016 a las 04:25

2 respuestas

La mejor respuesta

Adjunte el controlador de eventos a la clase y asigne a cada cuadro un atributo de datos que lo vincule al <p> correspondiente.

$(document).ready(function() {
  $(".outerbox").hover(function() {
    $("#" + $(this).data('p')).addClass("show");
  }, function() {
    $("#" + $(this).data('p')).removeClass("show");
  });
});
#box1,
#box2,
#box3 {
  width: 100px;
  height: 100px;
  border: solid 2px #000;
  float: left;
  margin-right: 20px;
  position: relative;
  cursor: pointer;
}
p {
  display: none;
}
.show {
  display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="display:inline-block;">
  <div id="box1" class="outerbox" data-p="p1">
  </div>
  <div id="box2" class="outerbox" data-p="p2">
  </div>
  <div id="box3" class="outerbox" data-p="p3">
  </div>
</div>
<div style="display:block;">
  <p id="p1">
    Paragraph 1
  </p>
  <p id="p2">
    Paragraph 2
  </p>
  <p id="p3">
    Paragraph 3
  </p>
</div>
2
Barmar 30 ene. 2016 a las 01:39

Algo como esto:

 $(document).ready(function() {
        $(".outerbox").hover(function() {
            var getIndex = $(this).index();//Gets index of hovered elem
            //alert(getIndex);
            $("p").eq(getIndex).addClass("show");//Apply index of hovered elem to p elem
            }, function() {
            $("p").removeClass("show");
        });    
    });
0
Dejo Dekic 30 ene. 2016 a las 01:48