在多个实例中使用相同的 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 :

$(document).ready(function(){
  $(".flip").mouseenter(function(){
    $(this).siblings(".panel").slideDown("medium");
  });
  $(".flip").mouseleave(function(){
    $(this).siblings(".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>

片段使用 hover :

$(document).ready(function(){
  $( ".flip" ).hover(function() {
      $(this).siblings(".panel").slideDown("medium");
  }, function() {
      $(this).siblings(".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 2

接下来可以使用jQuery找到对应的面板：

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

Answer 3

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

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

Use same jQuery function in multiple instances

javascript

jquery

function

instances