为什么不是这个简单的jQuery块不工作？

jQuery的：为什么不是这个简单的jQuery块不工作？

$(document).ready(function() { 
    $("#links .button").click(function() { 
     var id = $(this).attr("id") + "-fade"; 
     $("#sliding-blocks").fadeOut(100); 
     $("#" + id).fadeIn(300); 
    }); 
});

与简易HTML：

<table id="links"> 
    <tr> 
     <td> 
      <div id="projects" class="button"> 
       Projects 
      </div> 
     </td> 
    </tr> 
</table> 

<table id="sliding-blocks"> 
    <tr> 
     <td> 
      <span id="projects-fade" class="block"> 
       <img class="icon" src="github.png" height="20" width="20" /> 
      </span> 
     </td> 
    </tr> 
</table>

非精简HTML包含#links和#sliding-blocks，但所有的多个条目遵循同样的 “变脸” 命名约定。

出于某种原因，我不能得到任何工作（甚至没有我能工作的东西）。是的，我已经加载jQuery。

解决方案：

$(document).ready(function() { 
    var blocks = ["projects-fade", "blog-fade", "online-fade", "resume-fade"]; 
    $("#links .button").click(function() { 
     var id = this.id + "-fade"; 
     $("#sliding-blocks").fadeOut(100,function() { 
      $.each(blocks, function() { 
       $("#" + this).hide(); 
      }); 
      $("#" + id).show(); 
      $(this).fadeIn(300); 
     }); 
    }); 
});

来源

2012-02-11 n0pe

你正在淡出包含你想要显示的元素的表 – frictionlesspulley 2012-02-11 18:00:23

因为你已经淡出你想淡入。

当祖先淡出，则其后代的将是可见的元素的祖先。

我假定你正在寻找这样的事情...

$(document).ready(function() { 
    $("#links .button").click(function() { 
     var id = this.id + "-fade"; 
     $("#sliding-blocks").fadeOut(100,function() { 
      $("#" + id).show(); 
      $(this).fadeIn(300); 
     }); 
    }); 
});

来源

2012-02-11 17:57:50

谢谢你。我为你的实现添加了一个小函数（如果你感兴趣，请参阅我的问题）。 – n0pe 2012-02-11 18:13:57

@MaxMackie：看起来不错，但是如果你想隐藏其他的，你也可以通过类'$（“.block”）。hide（）'来选择它们，不需要数组和'$ .each '。 – 2012-02-11 18:23:11

对！我忘了那个。再次感谢。 – n0pe 2012-02-11 19:28:50

你淡出#sliding-blocks表，并在它的一个元素淡化，但表本身还是淡出。您应该淡化所有.block元素，然后淡入所需的元素，并始终显示表格。

来源

2012-02-11 17:57:03 Joe

我假设.block元素有display：block，否则它们不会褪色。 – Vigrond 2012-02-11 18:14:50

你隐藏了滑动块，然后your're试图淡化它的一个子元素，这不会作为父容器滑动块是不可见的

来源

2012-02-11 17:58:16 clem

为什么不是这个简单的jQuery块不工作？

回答

相关问题