我有一些 div,每个都包含一个日期选择器和一个按钮。我想通过单击相应的 Reschedule
按钮来显示/隐藏一个单个 日期选择器。但是,在我当前的解决方案中,所有 日期选择器在我单击按钮时都会切换。
我写了这个脚本:
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".datepicker_reschedule").hide();
$(".panel-heading").on('click','.reschedule',function(){
$(".datepicker_reschedule").fadeToggle("slow", "linear" );
});
});
</script>
<div class="panel panel-default">
<div class="panel-heading">
<button class="btn reschedule">Reschedule</button>
<button class="btn cancel">Cancel</button>
<span class="datepicker_reschedule">
<input type="text" class="form-control">
<button class="btn btn-sm btn-warning">Save</button>
</span>
</div>
<div class="panel-body" style="overflow: auto;">content A</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<button class="btn btn-info reschedule" id="" style="width:100px">Reschedule</button>
<button class="btn btn-warning" id="cancel" style="width:100px">Cancel</button>
<span class="datepicker_reschedule">
<input type="text" class="form-control">
<button class="btn btn-sm btn-warning">Save</button>
</span>
</div>
<div class="panel-body" style="overflow: auto;">content B</div>
</div>
最佳答案
您只需找到按钮与要切换的元素之间的关系
。在您的情况下,它们都是同一 panel-heading
元素的 children
。
因此,只需像这样更改应该切换的元素:
$(this).parent().find(".datepicker_reschedule").fadeToggle("slow", "linear" );
$(this)
- 与点击的按钮相关parent()
- 该按钮的父级find(".datapicker..")
- 找到所需的元素。
会完成工作。
关于javascript - 我可以使用 jquery 在同一个类中显示或隐藏吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31044320/