我能在同一个类中使用jQuery来显示或隐藏吗？

Question

我有一些div，每个div里包含一个日期选择器和一个按钮。我想通过点击其相应的“重新安排”按钮来显示/隐藏单个日期选择器。然而，在我当前的解决方案中，当我点击按钮时所有日期选择器都会切换。

我编写了以下脚本：

<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>

- Arif Hidayat

---

你当前的解决方案有什么问题？ - aochagavia

当我点击一个按钮时，所有文本框都出现了， 我只想要一个出现。 - Arif Hidayat

你为什么不使用两个不同的ID，并通过这些ID进行处理呢？ - Yasitha

这里有很多我可以展示的东西，但是因为我使用for循环，所以这里只展示两个。 - Arif Hidayat

Answer 1

您只需要找到按钮和要切换的元素之间的关系。在您的情况下，它们都是同一个“panel-heading”元素的子元素。因此，只需将应该被切换的元素更改为：

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

• $(this) - 指代被点击的按钮
• parent() -该按钮的父元素
• find(".datapicker.") - 查找所需的元素。

完成任务。

Fiddle

- Ofir Baruch

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>

- Bellash