Question

我是jquery的新手并试图让这个代码能够帮助我使用，但我现在遇到了麻烦。

我希望我的摄影网站顶部有按钮，当您点击按钮时，您点击的类别（即'风景''肖像''婚礼'）会显示所有带有这些“标签”的帖子（div类）。我让它在小提琴中工作，但是当我尝试将div包裹在帖子和按钮上以将它们放在页面上时，兄弟选择器会断开。

较旧的工作在这里摆弄（没有div包装）：http://jsfiddle.net/PxpXy/

这里破碎的小提琴（使用div包装器）：http://jsfiddle.net/JUsZK/10/

我已经在顶部的按钮和上下文（#test＆amp; #test2）中添加了包装器，但现在（显然）兄弟选择器不起作用。

我如何仍然拥有我的网站功能并使用div包装器在页面上重新定位它们？我不再想要兄弟选择器吗？

谢谢！

Answer 1

鉴于你已将图片包装在ID为“test”的div中，你可以这样做：

$('#test .post').hide();

也就是说，隐藏'#test'div内的类'.post'的元素。

Answer 2

你的div不再是sibbling，固定版本可能是http://jsfiddle.net/JUsZK/11/

Answer 3

您只需将选择器修改为：

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

使用$('div.post')当然会使用div class的所有 post元素。要仅限制某些 div的响应，您可以指定父容器元素，然后使用find()仅处理您特别感兴趣的元素，例如：

$('button').click(function() {
    $(parentElementSelector).find('.post').hide()
    $('.' + this.id).show(500);
});

请注意，我没有更正多个id问题，但我建议使用class（或者，因为你没有在jQuery中使用它，我可以请参阅问题中的，只需删除id）。

Answer 4

在HTML中，id应该是唯一的。在你的第二个（非工作）小提琴中，你有三个id为test的div。