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

Question

I have 2 blocks that have button #add-note with click event and this button should open block with .add-note class. If I click on any of these buttons it opens me 2 divs but I need that button opens 1 div that appera to these 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

There are a few issues with your code that have been mentioned in the comments, but I will sum then up here.

1. There are elements with the same ID. This would cause selection issues with the jQuery, as well as being something you should never do. An ID name should never be used more than once on a page with no exceptions.

2. The .add-note class was being added twice to the last li element. Although this woudn't cause an adverse effects, it isn't very good practice.

3. The jQuery was targeting two elements to be toggled, not the element that relates to the clicked button.

Solution:

When the click event is triggered you need to select the element that is relevant to the element that was clicked. The IDs have been switched to classes and the old .add-node li now has a class of note .

So inside the click event you can use $(this) to specify the element that has been clicked, then use prev() to select the ul next to the clicked element and then find('.note') to select the element to be toggled.

 $('.add-note').click(function() { $(this).prev().find('.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="note"> <form action="some-action" class="add-note-form"> <input type="text" class="form-control" placeholder=""> <button type="submit" class="btn form-submit-btn submit-new-note-2">Add Note</button> </form> </li> </ul> <button type="button" class="btn add-alert-btn 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="note"> <form action="some-action" class="add-note-form"> <input type="text" class="form-control" placeholder=""> <button type="submit" class="btn form-submit-btn submit-new-note-2">Add Note</button> </form> </li> </ul> <button type="button" class="btn add-alert-btn add-note"><i class="fa fa-plus" aria-hidden="true"></i> Add Note Here</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

to only address the elements to the corresponding button, a wrapper is useful:

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

with this, you can bind a function to the button class and within the handle address the sibbling of the clicked button. i've done this, using parent->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
});

see working fiddle, including a 'save' function: https://jsfiddle.net/x0ndL8h1/