Estoy tratando de crear la función on() mouseenter para cada elemento, pero hay alguna forma de acortar esa función de alguna manera. El problema es que he creado eso en la función mouseenter varias veces. Por favor ayuda chicos :)

Este es el código a continuación

var $member1 = $('.team-content img:nth-child(1)'),
  $member2 = $('.team-content img:nth-child(2)'),
  $member3 = $('.team-content img:nth-child(3)'),
  $member4 = $('.team-content img:nth-child(4)')

$(".member1").on('mouseenter', function() {
  $member1.css({
    "left": "0px"
  });
}).on('mouseleave', function() {
  $member1.css({
    "left": ""
  });
});

$(".member2").on('mouseenter', function() {
  $member2.css({
    "left": "0px"
  });
}).on('mouseleave', function() {
  $member2.css({
    "left": ""
  });
});

$(".member3").on('mouseenter', function() {
  $member3.css({
    "left": "0px"
  });
}).on('mouseleave', function() {
  $member3.css({
    "left": ""
  });
});

$(".member4").on('mouseenter', function() {
  $member4.css({
    "left": "0px"
  });
}).on('mouseleave', function() {
  $member4.css({
    "left": ""
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="team" class="about-team">
  <div class="team-header">
    <h2 class="team-text">Our Team</h2>
    <div class="divider"></div>
  </div>
  <div class="section-content">
    <div class="row text-center">
      <div class="col-xs-6 col-md-3 col-lg-3 member1">
        <h2 class="t-seperator">John Doe</h2>
        <span>/CEO</span>
      </div>
      <div class="col-xs-6 col-md-3 col-lg-3 member2">
        <h2 class="t-seperator">Jesica Ice</h2>
        <span>/DESIGNER</span>
      </div>
      <div class="col-xs-6 col-md-3 col-lg-3 member4">
        <h2 class="t-seperator">Anna Moon</h2>
        <span>/MARKETER</span>
      </div>
      <div class="col-xs-6 col-md-3 col-lg-3 member3">
        <h2 class="t-seperator">Michael Huge</h2>
        <span>/DEVELOPER</span>
      </div>
    </div>
  </div>
</div>

<div id="main-team" class="team-content">

  <img src="assets/img/team/team1.jpeg" alt="Team 1">
  <img src="assets/img/team/team2.jpg" alt="Team 2">
  <img src="assets/img/team/team3.jpg" alt="Team 3">
  <img src="assets/img/team/team4.jpg" alt="Team 4">

</div>
1
HAJI HASHIMOV 13 ene. 2017 a las 21:45

3 respuestas

La mejor respuesta

Es posible que lo haya pensado demasiado, pero si el número de miembro y el número enésimo son iguales, ¿por qué no usarlo para crear el descriptor de acceso relevante? Tengo tres funciones aquí: la primera se ejecuta en la inicialización y guarda la parte entera del número de miembro como un atributo de datos para su recuperación posterior. Las funciones mouseenter y mouseleave recuperan ese número de miembro guardado y construyen el selector con eso.

$("div[class*='member']").each(function() {
    // for every member element, let's save its
    //  relevant nth-child number.
    var myNumber = 0;
    var myClasses = $(this).prop("class").split(" ");
   
  // check all classes to find the member number
    for (var i = 0; i <= myClasses.length; i++) {
      if ( myClasses[i].startsWith("member") ) {
        // strip out JUST the number portion.
        myNumber = myClasses[i].match(/\d+/)[0];
      }
      if( myNumber != 0 )
      break;
    }
    // Save the number portion for later.
    $(this).data("nthNumber", myNumber);
  }).on('mouseenter', function() {
    // retrieve the saved number
    var selector = ".team-content img:nth-child("+ $(this).data("nthNumber") +" )"; 
    $(selector).show();
  }).on('mouseleave', function() {
    // retrieve the saved number
    var selector = ".team-content img:nth-child("+ $(this).data("nthNumber") +" )"; 
    $(selector).hide();
  });
.about-team {
  width: 400px;
  float: left;
}
.team-content {
  position: absolute;
  right: 5px;
  top: 5px;
}
.team-content img {
  display: none;
  border: 1px dotted red;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="team" class="about-team">
  <div class="team-header">
    <h2 class="team-text">Our Team</h2>
    <div class="divider"></div>
  </div>
  <div class="section-content">
    <div class="row text-center">
      <div class="col-xs-6 col-md-3 col-lg-3 member1">
        <h2 class="t-seperator">John Doe</h2>
        <span>/CEO</span>
      </div>
      <div class="col-xs-6 col-md-3 col-lg-3 member2">
        <h2 class="t-seperator">Jesica Ice</h2>
        <span>/DESIGNER</span>
      </div>
      <div class="col-xs-6 col-md-3 col-lg-3 member4">
        <h2 class="t-seperator">Anna Moon</h2>
        <span>/MARKETER</span>
      </div>
      <div class="col-xs-6 col-md-3 col-lg-3 member3">
        <h2 class="t-seperator">Michael Huge</h2>
        <span>/DEVELOPER</span>
      </div>
    </div>
  </div>
</div>

<div id="main-team" class="team-content">

  <img src="assets/img/team/team1.jpeg" alt="Team 1">
  <img src="assets/img/team/team2.jpg" alt="Team 2">
  <img src="assets/img/team/team3.jpg" alt="Team 3">
  <img src="assets/img/team/team4.jpg" alt="Team 4">

</div>

Así que se hicieron algunos cambios: primero, había dejado mal el selector inicial. Luego, agregué algunos estilos CSS para que pudiéramos ver algo sucediendo. La ventaja de este enfoque (aunque puede ser más largo) es que es extensible. Si agrega treinta empleados más, tendría que crear una variable para cada uno y usarla cada vez. Con este enfoque, está sucediendo automáticamente.

0
Snowmonkey 13 ene. 2017 a las 19:48

Puede agregar un controlador general y aplicar la función en el elemento .member* correspondiente si detecta el índice del img suspendido utilizando función index(), Aquí hay un ejemplo: (En el ejemplo, cambio el color solo por claridad)

$(".team-content img").on('mouseenter', function(e) {
  var imageIndex = $(".team-content img").index(e.target) + 1;
  $(".member" + imageIndex).css({
    "color": "red"
  });
}).on('mouseleave', function(e) {
  var imageIndex = $(".team-content img").index(e.target) + 1;
  $(".member" + imageIndex).css({
    "color": "black"
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="team" class="about-team">
  <div class="team-header">
    <h2 class="team-text">Our Team</h2>
    <div class="divider"></div>
  </div>
  <div class="section-content">
    <div class="row text-center">
      <div class="col-xs-6 col-md-3 col-lg-3 member1">
        <h2 class="t-seperator">John Doe</h2>
        <span>/CEO</span>
      </div>
      <div class="col-xs-6 col-md-3 col-lg-3 member2">
        <h2 class="t-seperator">Jesica Ice</h2>
        <span>/DESIGNER</span>
      </div>
      <div class="col-xs-6 col-md-3 col-lg-3 member4">
        <h2 class="t-seperator">Anna Moon</h2>
        <span>/MARKETER</span>
      </div>
      <div class="col-xs-6 col-md-3 col-lg-3 member3">
        <h2 class="t-seperator">Michael Huge</h2>
        <span>/DEVELOPER</span>
      </div>
    </div>
  </div>
</div>

<div id="main-team" class="team-content">
  <img src="assets/img/team/team1.jpeg" alt="Team 1">
  <img src="assets/img/team/team2.jpg" alt="Team 2">
  <img src="assets/img/team/team3.jpg" alt="Team 3">
  <img src="assets/img/team/team4.jpg" alt="Team 4">
</div>
2
Tha'er M. Al-Ajlouni 13 ene. 2017 a las 20:47

¡Solo puedes usar un bucle para hacerlas todas a la vez!

for (var i = 1; i <= 4; i++) {
    $('.member' + i).on('mouseenter', function() {
        $('.team-content img:nth-child(' + i + ')').css({'left': '0px'});
    }).on('mouseleave', function() {
        $('.team-content img:nth-child(' + i + ')').css({'left': ''});
    });
}
1
m_callens 13 ene. 2017 a las 18:52