Question

我有一些div，每个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>

Answer 1

您只需找到要切换的元素按钮之间的relation即可。在您的情况下，它们都是children元素的panel-heading。

因此，只需更改应该切换的元素：

$(this).parent().find(".datepicker_reschedule").fadeToggle("slow", "linear" );

$(this) - 与点击的按钮相关
parent() - 该按钮的父级
find(".datapicker..") - 找到所需的元素。

将完成这项工作。

Fiddle

Answer 2

这是一个工作片段！我指的是被点击的元素，我已将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>

我可以用jquery显示或隐藏在同一个类中

2 个答案: