Question

我有一个不起作用的JQuery脚本。如果我把按钮元素从div中删除，那么它就可以了。请帮我。谢谢。

http://jsfiddle.net/fysalyaqoob/6fornysr/8/

JS：

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

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

HTML：

<div class="1">
    <div class="2">
        <div class="wedding post">WEDDING DIL</div>
    </div>
</div>
<div class="portrait post">PORTRAIT 1</div>
<div class="personal post">PERSONAL 1</div>
<div class="wedding post">WEDDING 2</div>
<div class="wedding post">WEDDING 3</div>
<div class="portrait post">PORTRAIT 2</div>

<div id="clear" class="clearfix"></div>

<div class="wrapper">
    <div class="btn-group">
        <button id="wedding">Wedding</button>
        <button id="personal">Personal</button>
        <button id="portrait">Portraits</button>
        <button id="landscape">Landscape</button>
        <button id="showall">Show All</button>
    </div>
</div>

Answer 1

post元素不是按钮的直接父元素的子元素。尝试将parent替换为parents。

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

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

http://jsfiddle.net/6fornysr/13/

Answer 2

您需要将所有.post子项放在父容器中，以便JQuery可以遍历到正确的位置。

FIDDLE

HTML：

<div id="hide">
<div class="portrait post">PORTRAIT 1</div>
<div class="personal post">PERSONAL 1</div>
<div class="wedding post">WEDDING 2</div>
<div class="wedding post">WEDDING 3</div>
<div class="portrait post">PORTRAIT 2</div>

<div id="clear" class="clearfix"></div>
</div>

JQuery：

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

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

JQuery按钮无法点击

2 个答案: