javascript - 函数点击jquery申请多个元素？

Question

这是我得到的:jsFiddle demo

html:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<div class="wrap_demo">
 <input type="button" class="click" value="click" onClick="function" />
</div>
<div class="wrap_demo">
 <input type="button" class="click" value="click" onClick="function" />
</div>
<div class="wrap_demo">
 <input type="button" class="click" value="click" onClick="function" />
</div>
<script>
$(document).ready(function(){
    $( ".click" ).click(function() {
       if($(".wrap_demo").height()==50)
        $(".wrap_demo").animate({height: '300px'});
        else  $(".wrap_demo").animate({height: '50px'});
    });
});

CSS:

 .wrap_demo{
width:300px;
height:50px;
border:1px solid black;
float:left;
margin-top:20px;
position:relative;
}

.click{
display:block;
width:40px;
height:40px;
background:white;
border-radius:50%;
border:1px solid black;
position:absolute;
top:5px;
left:170px;
font-size:12px;
line-height:30px;
text-align:center;
cursor:pointer;
}
.click:focus{
outline:none;
}

我想当单击按钮“单击”时，jquery 函数只打开 wrap_demo 是按钮单击的父级，我单击了。函数 jquery 如何仅对 1 个父 wrap_demo 进行动画处理？

Answer 1

您可以使用 $(this)定位被点击的当前按钮以及.parent()或 .closest()只得到 parent .wrap_demo单击按钮的数量:

$(document).ready(function(){
    $( ".click" ).click(function() {
       var wrap_demo = $(this).closest(".wrap_demo"); // or $(this).parent();
       if(wrap_demo.height()==50)
        wrap_demo.animate({height: '300px'});
        else wrap_demo.animate({height: '50px'});
    });
});

请注意，您不需要使用内联 onClick此处的事件处理程序，因为您已经申请了 .click() ，所以只需将其删除。

另一个注意事项是您可以直接从 jsFiddle 中包含 jQuery而不是使用 <script>通过从 Frameworks & Extensions 中选择 jQUery 版本来标记选项卡

Updated Fiddle