fadeOut（）僅淡出第一個元素

默認情況下，我隱藏了多個DIV，然後在用戶單擊某個按鈕時將其淡入淡出。這工作正常，但是當我嘗試使用.holder DIV中的跨度關閉.holder DIV時，只有第一個工作。當我點擊其他人時，沒有任何反應。我沒有任何錯誤或任何形式的視覺反饋。fadeOut（）僅淡出第一個元素

的標記：

<div class="holder" id="window_one"> 
    <div class="title_bar"> 
     <p>Window 1</p> 
     <div class="control_holder"> 
      <span class="controls" id="close">X</span> 
      <span class="controls" id="minimize">_</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div> 
<div class="calculator" id="window_two"> 
    <div class="title_bar"> 
     <p>Window 2</p> 
     <div class="control_holder"> 
      <span class="controls" id="close">X</span> 
      <span class="controls" id="minimize">_</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div>

jQuery的：

$(document).ready(function() { 
    $('#close').click(function() { 
     $(this).parents('.holder').fadeOut(250); 
    }); 
});

我究竟做錯了什麼？我使用jQuery 1.10.2，如果這有什麼區別。

我會演示jsFiddle上的代碼，但似乎是下來atm。

來源

2013-09-22 Kasim Ahmic

ID應該是唯一的 –

你可以有多個類一個對象，只是他們用空格分隔，利用班，即class =「class1 class2」，這個對象可以作爲.class1或.class2加載......所以使用class而不是唯一的id ...然後不要忘記它會給你數組，所以通過數組運行爲每個元素> | –

@ M.Svrcek哎呀，忘了這一點，謝謝！ –

你不能在頁面上有兩個元素的相同ID。如果你想這樣做，給它一個類名一樣 -

<div class="holder" id="window_one"> 
    <div class="title_bar"> 
     <p>Window 1</p> 
     <div class="control_holder"> 
      <span class="controls close">X</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div> 
<div class="calculator" id="window_two"> 
    <div class="title_bar"> 
     <p>Window 2</p> 
     <div class="control_holder"> 
      <span class="controls close">X</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div>

和Jquery的一樣 -

$(document).ready(function() { 
    $('.close').click(function() { 
     $(this).parents('.holder').fadeOut(250); 
    }); 
});

希望這會有所幫助。

來源

2013-09-22 22:55:39 Ritesh

工作完美，謝謝！忘記了多個班的事情：P –

這是應該的：

<div class="holder" id="window_one"> 
    <div class="title_bar"> 
     <p>Window 1</p> 
     <div class="control_holder"> 
      <span class="controls close">X</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div> 
<div class="calculator" id="window_two"> 
    <div class="title_bar"> 
     <p>Window 2</p> 
     <div class="control_holder"> 
      <span class="controls close">X</span> 
     </div> 
    </div> 
    <div class="interface"> 
     <p>Testing123</p> 
    </div> 
</div>

和JavaScript：

$(document).ready(function() { 
    $('.close').click(function(e) { 

     $(this).parents('.holder').forEach(function(){ 

        $(this).fadeOut(250); 

         }); 

     e.preventDefault(); 
    }); 

});

來源

2013-09-23 01:27:35

fadeOut（）僅淡出第一個元素

回答

相關問題