我有这个功能,它需要在页面上的 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>
最佳答案
您可以使用 $(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>
关于javascript - 在多个实例中使用相同的 jQuery 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42398457/