I have some divs, each one containing a date picker and a button. I would like to show / hide a single date picker by clicking on its respective Reschedule
button. However, in my current solution all date pickers are toggled when I click on the button.
我有一些div,每个div包含一个日期选择器和一个按钮。我想通过单击其相应的重新计划按钮来显示/隐藏单个日期选择器。但是,在我目前的解决方案中,当我点击按钮时,所有日期选择器都会切换。
I've written this script:
我写过这个剧本:
<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>
2 个解决方案
#1
3
You simply need to find the relation
between the button to the element you want to toggle. In your case they both are children
of the same panel-heading
element.
您只需要找到要切换的元素的按钮之间的关系。在您的情况下,它们都是同一个panel-heading元素的子元素。
Therefore, simply changing the element that should be toggled like that:
因此,只需更改应该切换的元素:
$(this).parent().find(".datepicker_reschedule").fadeToggle("slow", "linear" );
-
$(this)
- relates to the clicked button - $(this) - 与点击的按钮有关
-
parent()
- the parent of that button - parent() - 该按钮的父级
-
find(".datapicker..")
- find the desired element. - find(“。datapicker ..”) - 找到所需的元素。
Will do the job.
会做的工作。
小提琴
#2
1
Here is a working snippet! I refer to the element being clicked and I have added the parent() and the find() functions to your code. Now it works perfectly!
这是一个工作片段!我指的是被单击的元素,我已将parent()和find()函数添加到您的代码中。现在它完美无缺!
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".datepicker_reschedule").hide();
$(".reschedule").on('click',function(e){
$(this).parent().find(".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>
#1
3
You simply need to find the relation
between the button to the element you want to toggle. In your case they both are children
of the same panel-heading
element.
您只需要找到要切换的元素的按钮之间的关系。在您的情况下,它们都是同一个panel-heading元素的子元素。
Therefore, simply changing the element that should be toggled like that:
因此,只需更改应该切换的元素:
$(this).parent().find(".datepicker_reschedule").fadeToggle("slow", "linear" );
-
$(this)
- relates to the clicked button - $(this) - 与点击的按钮有关
-
parent()
- the parent of that button - parent() - 该按钮的父级
-
find(".datapicker..")
- find the desired element. - find(“。datapicker ..”) - 找到所需的元素。
Will do the job.
会做的工作。
小提琴
#2
1
Here is a working snippet! I refer to the element being clicked and I have added the parent() and the find() functions to your code. Now it works perfectly!
这是一个工作片段!我指的是被单击的元素,我已将parent()和find()函数添加到您的代码中。现在它完美无缺!
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".datepicker_reschedule").hide();
$(".reschedule").on('click',function(e){
$(this).parent().find(".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>