Javascript 在不同的单击中打开相同元素的jquery单击事件

我有两个块，有按钮添加注释与点击事件，这个按钮应该打开块与。添加注释类。如果我点击这些按钮中的任何一个，它会为我打开2个div，但我需要该按钮打开1个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>

---

评论中提到了代码中的一些问题，但我将在这里总结

存在具有相同ID的元素。这将导致jQuery出现选择问题，并且是您永远不应该做的事情。ID名称在一个页面上不得使用多次，没有例外

.add note类被两次添加到最后一个li元素中。虽然这不会造成不良影响，但这不是很好的做法

jQuery的目标是两个要切换的元素，而不是与单击的按钮相关的元素

解决方案：

触发单击事件时，需要选择与单击的元素相关的元素。ID已切换到类，旧的.add节点li现在有一个注释类

因此，在click事件中，您可以使用$this指定已单击的元素，然后使用prev选择单击元素旁边的ul，然后查找“.note”选择要切换的元素

$。添加注释。单击函数{ $this.prev.find'.note'.toggle'slow'，函数{ //动画完成。 }; }; 上午10:31

警报1

上午10:31

警报1

上午10:31

警报1

添加注释 在此添加注释 上午10:31

警报1

上午10:31

警报1

上午10:31

警报1

添加注释 在此添加注释

---

要仅将元素寻址到相应的按钮，包装器非常有用：

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

---

请参阅working fiddle，包括“save”函数：

代码在哪里？如果您包括jQuery代码，也许有人可以帮助您。这是简单的代码，我添加了它。请清理您的标记。id必须是唯一的-你使用它们两次。元素不需要指定两次类…如果我创建不同的id，只有一个按钮可以工作。我需要一个脚本打开2块，如果我点击不同的按钮

$(".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
});