Question

我有两个带有按钮#add-note和click事件的块，这个按钮应该用.add-note类打开块。如果我点击这些按钮中的任何一个，它会打开我2个div，但是我需要那个按钮打开1 div，这些div会出现在这些div中。

$('#add-note').click(function() {
    $('.add-note').toggle('slow', function() {
        // Animation complete.
    });
});

<ul class="list-unstyled alerts-list contracts-alert-list">
                        <li>
                            <div class="alert-list-left">
                                <div class="alert-time  contracts-alert">
                                    <p>10:31 AM</p>
                                </div>
                                <p>
                                    <span class="alert-title">Alert 1</span>

                                </p>
                            </div>
                            <a href=""><i class="fa fa-times" aria-hidden="true"></i></a>
                        </li>
                        <li>
                            <div class="alert-list-left">
                                <div class="alert-time  contracts-alert">
                                    <p>10:31 AM</p>
                                </div>
                                <p>
                                    <span class="alert-title">Alert 1</span>

                                </p>
                            </div>
                            <a href=""><i class="fa fa-times" aria-hidden="true"></i></a>
                        </li>
                        <li>
                            <div class="alert-list-left">
                                <div class="alert-time  contracts-alert">
                                    <p>10:31 AM</p>
                                </div>
                                <p>
                                    <span class="alert-title">Alert 1</span>

                                </p>
                            </div>
                            <a href=""><i class="fa fa-times" aria-hidden="true"></i></a>
                        </li>
                        <li class="add-note add-note">
                            <form action="some-action" class="add-note-form">
                                <input type="text" class="form-control" placeholder="">
                                <button type="submit" class="btn form-submit-btn" id="submit-new-note-2">Add Note</button>
                            </form>
                        </li>
                    </ul>
                    <button type="button" class="btn add-alert-btn" id="add-note"><i class="fa fa-plus" aria-hidden="true"></i> Add Note Here</button>


<ul class="list-unstyled alerts-list contracts-alert-list">
                        <li>
                            <div class="alert-list-left">
                                <div class="alert-time  contracts-alert">
                                    <p>10:31 AM</p>
                                </div>
                                <p>
                                    <span class="alert-title">Alert 1</span>

                                </p>
                            </div>
                            <a href=""><i class="fa fa-times" aria-hidden="true"></i></a>
                        </li>
                        <li>
                            <div class="alert-list-left">
                                <div class="alert-time  contracts-alert">
                                    <p>10:31 AM</p>
                                </div>
                                <p>
                                    <span class="alert-title">Alert 1</span>

                                </p>
                            </div>
                            <a href=""><i class="fa fa-times" aria-hidden="true"></i></a>
                        </li>
                        <li>
                            <div class="alert-list-left">
                                <div class="alert-time  contracts-alert">
                                    <p>10:31 AM</p>
                                </div>
                                <p>
                                    <span class="alert-title">Alert 1</span>

                                </p>
                            </div>
                            <a href=""><i class="fa fa-times" aria-hidden="true"></i></a>
                        </li>
                        <li class="add-note add-note">
                            <form action="some-action" class="add-note-form">
                                <input type="text" class="form-control" placeholder="">
                                <button type="submit" class="btn form-submit-btn" id="submit-new-note-2">Add Note</button>
                            </form>
                        </li>
                    </ul>
                    <button type="button" class="btn add-alert-btn" id="add-note"><i class="fa fa-plus" aria-hidden="true"></i> Add Note Here</button>

Answer 1

您的代码中有一些问题已在评论中提及，但我会在此总结。

有些ID具有相同的元素。这会导致jQuery的选择问题，以及你永远不应该做的事情。在页面上不得多次使用ID名称，无例外。
.add-note类被添加到最后一个li元素两次。虽然这不会造成不良影响，但这并不是一种很好的做法。
jQuery的目标是两个要切换的元素，而不是与点击的按钮相关的元素。

<强>解决方案：

触发click事件时，您需要选择与单击的元素相关的元素。 ID已切换为类，旧的.add-node li现在具有note类。

因此，在点击事件中，您可以使用$(this)指定已点击的元素，然后使用prev()选择点击元素旁边的ul，然后{{1选择要切换的元素。

＆＃13;

find('.note')

＆＃13;

$('.add-note').click(function() {
  $(this).prev().find('.note').toggle('slow', function() {
      // Animation complete.
  });
});

＆＃13;

Answer 2

只将元素寻址到相应的按钮，包装器很有用：

<div class="listWrapper">
  <ul class="anUnorderedList" id="firstList">
    <li>some item</li>
    <li>some other item</li>
    <li class='inputItem'>
      <form>
        <input type='text' /> <span class="saveButton">save</span></form>
    </li>
  </ul>
  <div class="addButton">
    add another item to first list
  </div>
</div>

有了这个，你可以将一个函数绑定到按钮类，并在句柄地址中绑定单击按钮的sibbling。我使用parent-＆gt; find：

完成了这项工作

$(".addButton").on("click", function() { 
  targetList = $(this).parent(".listWrapper").find("ul"); //find the corresponding ul

  targetList.find(".inputItem").toggle(); // toggle the li with class input item
});

查看工作小提琴，包括“保存”功能：https://jsfiddle.net/x0ndL8h1/

jquery click事件，用于在不同的点击中打开相同的元素

2 个答案: