淡出并淡入具有特定类和 id 的 Div答案

【问题标题】：Fade Out And fade in Div with specific class and id淡出并淡入具有特定类和 id 的 Div
【发布时间】：2013-12-16 15:51:26
【问题描述】：

我遇到了一些 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>

【问题讨论】：

注意： ID 必须是唯一的
还有注意：ID不应该以数字开头
@A.Wolff - 在 HTML5 中没问题。
从HTML5开始，以数字开头的ID就可以了
@devnull69 我不会说“以数字开头的 ID 就可以了”。一旦 CSS 处理它就会找到它

标签： javascript jquery

【解决方案1】：

ID's 必须是唯一的，并且不应该是 number。您必须为您的divs 设置不同的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

【讨论】：

隐藏在工作，但它不会在 . added div 中褪色！
@IreneT。现在看代码。我想你可能已经试过这个演示了。 :)

【解决方案2】：

您需要使用$(this) 隐藏当前元素并使用next 隐藏.added，同时使用唯一ID 使您的html 有效。

下一个元素已经可见，您可能需要fadeOut() 来隐藏它。

Live Demo

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

【讨论】：

【解决方案3】：

您不能在多个元素上使用相同的 id。而是使用一个类

 $('.add').on('click', function(){ $(this).fadeOut().next('.added').fadeIn(); });

【讨论】：

是的，但代码不使用 id，所以它们不是问题。
没错，但让我们编写有效的 html

【解决方案4】：

几点：

ID 应该是唯一的。如果您需要在一组元素上使用相同的选择器，请使用 class。
this 引用包含添加事件侦听器的目标，因此您的 this 上下文包含具有 add 类的元素。 jquery.find() 尝试匹配子项上的选择器。这就是您的代码无法正常工作的原因。

试试这个Jsbin Demo

HTML

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

JS

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

想法：在父节点上绑定事件监听器。

【讨论】：