2

我正在尝试更新我的摄影网站并使用 jquery 来显示或隐藏我的投资组合的“类别”。我到处搜索，终于在这里找到了这个解决方案：

http://jsfiddle.net/EwNRJ/145/

它工作正常。当您单击某个类别的按钮时，它会隐藏其余部分并显示该类别。但是，代码是不是太乱了，还是可以缩短？你们中的任何编码忍者都知道它是否合法或可以瘦身吗？

我主要关心隐藏其他类别的方式。对于每个功能，我会一一列出所有其他类别，并“显示”您单击的类别。因此，如果用户单击“肖像”，我首先显示肖像类，然后一一隐藏所有其他类（风景、个人等）。如果我在路上添加一个类别，我将不得不更新每个功能。没什么大不了的，只是想确保没有更好的方法，并且我的代码看起来不错，并且不会因为我在 jquery 上是绝对新手而导致任何内存问题。

提前致谢，祝您有美好的一天。

PS 如果有任何真正的绝地武士想要看另一件稍微让我烦恼的事情；现在，每个 div 几乎一个接一个地消失。有没有办法暂停或让它们更加一致地消失？我希望这是有道理的。我只是希望（如果可能的话）让它们一起动画化，而不是像多米诺骨牌一样快速地一个接一个地倒塌。好的，再次感谢！

4

3 回答 3

3

尝试这个：

$('button').click(function() {
    $(this).siblings('.post').hide() // or $('.post').hide()
    $('.' + this.id).show(500);
});

$('#showall').click(function() {
    $('.post').show(500);
});

演示

于 2012-07-08T06:35:54.077 回答
0

您应该缓存类别，而不是每次都尝试找到它们。

document.ready(function() {
     var Wedding = $('.wedding');
});

对于第二个问题，您需要使用回调函数作为参数。回调函数仅在主函数完成后执行。

例子：

 $('div').click(function() {
      $(this).animate({'top': '50px'}, 500, function() {
           //callback - start
           $(this).text('a');
           //callback-end
     });
});
于 2012-07-08T06:33:57.960 回答
0

这样做 http://jsfiddle.net/fedmich/M4G4r/

将按钮放在切换开关内。将元素放入 .posts 确保“肖像”映射到正确的“s”

快乐编码:)

$('.toggles button').click(function(){
    var d_id = this.id;
    var obj_cur = $('.posts .' + d_id);

    $('.post').not( obj_cur ).hide(500);
    obj_cur.show(500);
});
于 2012-07-08T06:43:46.607 回答