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/