如何在jQuery中使用.on（）方法和.each（）方法。？

Question

我正在練習我自己的網站的HTML，並偶然發現這一點。我相信這是一個簡單的解決方法，但想知道如何實現它。我希望我所有的列表項目或甚至只是一個特定的類受到影響。我知道.each（）方法訪問jQuery對象中匹配的所有元素。此代碼使用.each（）方法有效地訪問所有列表項。 $(function() { var $li = $('li'); $li.hide().each(function(index) { $(this).delay(700 * index).fadeIn(700) }); });

此代碼不會有。每（）方法，在這裏，因爲我試過將其放置在多個地方，甚至試圖速記文件準備功能包裹後整個塊在新的匿名功能。

$(function() { 
var $list = $('.nav'); 
$list.on('click', function() { 
    $(this).animate({ 
     opacity: 0.0, 
     paddingLeft: '+=80' 
    }, 500, function() { 
     $(this).remove(); 
    }); 
}); 

}）;

這隻適用於屬性爲nav的第一類項目。 任何幫助非常感謝。謝謝！

Answer 1

你不需要.each()因爲.on()已適用於每一個項目在列表中。

您的代碼已經寫入.nav類的每個項目。下面是一個工作代碼片段來說明。您可以點擊三個項目中的每一個並觀察它們消失。如果它不適用於你的應用程序，那一定是由於其他問題。檢查你的jQuery對象，並確保它確實包含你認爲它所做的所有元素！

$(function() { 
 
var $list = $('.nav'); 
 
$list.on('click', function() { 
 
    $(this).animate({ 
 
     opacity: 0.0, 
 
     paddingLeft: '+=80' 
 
    }, 500, function() { 
 
     $(this).remove(); 
 
    }); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="nav"> 
 
First item 
 
</div> 
 

 
<div class="nav"> 
 
Second item 
 
</div> 
 

 
<div class="nav"> 
 
Third item 
 
</div>

Answer 2

試試這個：

$(function() { 
    $(document).on('click', '.nav', function() { 
     $(this).animate({ 
      opacity: 0.0, 
      paddingLeft: '+=80' 
     }, 500, function() { 
      $(this).remove(); 
     }); 
    }); 
}); 

你想刪除所有的單一的點擊？如果這樣下面會起作用。

$(function() { 
     $(document).on('click', '.nav', function() { 
      $('.nav').animate({ 
       opacity: 0.0, 
       paddingLeft: '+=80' 
      }, 500, function() { 
       $('.nav').remove(); 
      }); 
     }); 
    });