javascript - 淡出和淡入具有特定类和 id 的 Div

Question

我遇到了一些 jquery 代码的小问题。我有一些 div(看下面)

<div class="add" id="1">Follow</div>
<div class="added" id="1">Following</div>

<div class="add" id="2">Follow</div>
<div class="added" id="2">Following</div>

我正在尝试当用户单击每个带有类添加的 div 以淡出特定的 div 并淡入下一个添加了类的 div。

检查我的代码:

<script type="text/javascript">
$(document).ready(function($){

$('.add').click(function () {
$(this).find('.add').hide("fast");
$(this).find('.added').fadeIn("slow");
});

});
</script>

Answer 1

ID's 必须是唯一的，它不应该是一个数字。您必须为您的 div 设置不同的 ids。此外，您必须首先隐藏带有 .added 类的 div 才能满足您的需要。

因为 fadeIn 不会对已经可见的元素起作用。

尝试，

<script type="text/javascript">
$(document).ready(function($){
   $('.added').hide();
   $('.add').click(function () {
       $(this).hide("fast");
       $(this).next('.added').fadeIn("slow");
    }); 
 });
</script>

DEMO