如何缩短这段代码？

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

如果您使用 index() 函数检测到悬停 img 的索引，您可以添加一个通用处理程序并将该函数应用于相应的 .member* 元素，这是一个示例:（在示例中，为了清楚起见，我更改了颜色）

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

您只需使用一个循环即可一次完成所有操作！

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

Answer 3

我可能有over-thought它，但是如果会员号和nth-child号相同，为什么不用它来创建相关访问器呢？我这里有三个函数：第一个在初始化时运行，并将会员编号的整数部分保存为数据属性以供以后检索。 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 样式，这样我们就可以看到发生了什么。这种方法（虽然它可能更长）的优点是它是可扩展的。如果再添加 30 个员工，则必须为每个员工创建一个变量，并且每次都使用该变量。通过这种方法，它会自动发生。

如何缩短这段代码？

How to shorten this code?

javascript

variables

jquery

function

mouseenter