jquery点击事件打开相同的元素在不同的点击

Question

我有2个块有按钮＃添加注意与点击事件，这个按钮应该打开与.add-note类的块。如果我点击这些按钮中的任何一个，它会打开我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> 

Answer 1

您的代码有几个问题已经在评论中提到过，但我会在这里总结一下。

1. 有元素具有相同的ID。这会导致jQuery的选择问题，以及你永远不应该做的事情。一个ID名称不应该在一个页面上多次使用，没有例外。

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

3. jQuery定位了两个要切换的元素，而不是与点击的按钮相关的元素。

解决方案：

当点击事件被触发，你需要选择，是有关被点击的元素的元素。这些ID已被切换到类别，旧的.add-nodeli现在有一类note。

因此点击事件中，您可以使用$(this)指定已被点击的元素，然后用prev()选择ul旁边点击的元素，然后find('.note')选择元素进行切换。

$('.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

只解决了元件与相应的按钮，一个包装是有用：

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

与此，可以在功能结合到按钮类和内句柄解决了被点击的按钮的同步问题。我已经做到了这一点，使用父 - >找到：

$(".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/