在多个实例中使用相同的jQuery函数

Question

我有这个功能，它需要在一个页面上的54个不同的按钮中工作，我错过了什么使它只在相应的FLIP中工作？

$(document).ready(function() {
  $(".flip").mouseenter(function() {
    $(".panel").slideDown("medium");
  });
});
$(document).ready(function() {
  $(".main").mouseleave(function() {
    $(".panel").slideUp("fast");
  });
});

.panel,
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
  width: 300px;
  display: block;
}

.panel {
  padding: 50px 5px;
  display: none;
}

.main {
  float: left;
  margin: 0 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="flip">This is FLIP 1</div>
  <div class="panel">This is the son of FLIP 1</div>
</div>

<div class="main">
  <div class="flip">This is FLIP 2</div>
  <div class="panel">This is the son of FLIP 2</div>
</div>

Answer 1

您可以使用$(this)对象和siblings()方法，例如：

$(document).ready(function(){
  $(".flip").mouseenter(function(){
    $(this).siblings(".panel").slideDown("medium");
  });

  $(".flip").mouseleave(function(){
    $(this).siblings(".panel").slideUp("fast");
  });
});

注意：不需要两个就绪功能只需一个即可。

希望这有帮助。

使用mouseenter/mouseleave的代码段

＆＃13;

＆＃13;

$(document).ready(function(){
  $(".flip").mouseenter(function(){
    $(this).siblings(".panel").slideDown("medium");
  });
  $(".flip").mouseleave(function(){
    $(this).siblings(".panel").slideUp("fast");
  });
});

＆＃13;

.panel,
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
  width: 300px;
  display: block;
}

.panel {
  padding: 50px 5px;
  display: none;
}

.main {
  float: left;
  margin: 0 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="flip">This is FLIP 1</div>
  <div class="panel">This is the son of FLIP 1</div>
</div>

<div class="main">
  <div class="flip">This is FLIP 2</div>
  <div class="panel">This is the son of FLIP 2</div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用hover的代码段

＆＃13;

＆＃13;

$(document).ready(function(){
  $( ".flip" ).hover(function() {
      $(this).siblings(".panel").slideDown("medium");
  }, function() {
      $(this).siblings(".panel").slideUp("fast");
  });
});

＆＃13;

.panel,
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
  width: 300px;
  display: block;
}

.panel {
  padding: 50px 5px;
  display: none;
}

.main {
  float: left;
  margin: 0 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="flip">This is FLIP 1</div>
  <div class="panel">This is the son of FLIP 1</div>
</div>

<div class="main">
  <div class="flip">This is FLIP 2</div>
  <div class="panel">This is the son of FLIP 2</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用jQuery查找相应的面板：

$(".flip").mouseenter(function(){
    $(this).next('.panel').slideDown("medium");
});

Answer 3

将$(".panel")替换为$(this).siblings('.panel')。当您执行$(".panel")时，您定位的是网页上的所有.panel元素，而不仅仅是您要使用的元素。