Как сократить этот код?

Question

Я пытаюсь создать функцию on()mouseenter для каждого элемента, но есть ли способ как-то сократить эту функцию. Проблема в том, что я создал это на mouseenter функции несколько раз. Пожалуйста, помогите ребята :)

Это код ниже

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>

Answer 1

я, возможно, более продуманные, но если число членов и число п-го ребенка такие же, почему бы не использовать это, чтобы создать соответствующую аксессор? Здесь у меня есть три функции: первая выполняется при инициализации и сохраняет целочисленную часть номера члена как атрибут данных для последующего извлечения. Функции mouseenter и mouseleave извлекают этот сохраненный номер элемента и строят селектор, используя это.

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

Так несколько изменений: во-первых, я оставил первоначальный селектор неправильно. Затем я добавил несколько стилей CSS, чтобы мы могли видеть что-то происходящее. Преимущество такого подхода (хотя оно может быть и больше) заключается в том, что оно является расширяемым. Если вы добавите еще тридцать сотрудников, вам нужно будет создать переменную для каждого из них и использовать ее каждый раз. При таком подходе это происходит автоматически.

Answer 2

Вы можете добавить общий обработчик и применить функцию на соответствующем .member* элемента, если вы обнаружили индекс парил img с использованием функции index(). Вот пример: (В примере я меняю цвет только для ясности)

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

Answer 3

Вы можете просто использовать цикл, чтобы получить их все сделано сразу!

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': ''}); 
    }); 
}