Question

很抱歉这个奇怪的标题，但我不知道有任何其他方式来描述它（欢迎改进！）。

我正在尝试制作投资组合网格。当您单击其中一个图像时，其下方会出现一个框，显示有关该项目的一些信息。我走得很远，但碰到了一些奇怪的行为。

我的HTML看起来像这样：

<ul class="pfGrid">
    <li>
        <a href="./">
            <img src="image.jpg" />
        </a>
    </li>
    ...
</ul>

我已经想出了这个jQuery脚本，可以滑入并滑出信息框：

<script>
$(document).ready( function() {
    $(".pfGrid li a").on("click", function(e) {
        // no default action when the link is clicked
        e.preventDefault();

        // hide any infobox that is visible
        $(".pfInfo").slideUp("normal", function() { $(".pfInfo").remove(); } );

        // if the image isn't allready active
        if( !$(this).hasClass("pfActive") ) {
            // remove the active class from the previous active item
            $(".pfGrid li a").removeClass( "pfActive");

            // add the info box, but hide it
            $(this).parent().append('<div style=\"display:none;\" class=\"pfInfo\">blaa<br /><br />bla<br />bla</div>');
            // slide down the infobox
            $(".pfInfo").slideDown();
            // make the image active
            $(this).addClass("pfActive");
        }
        // if the image is active, remove the class (info box is already hidden )
        else {
            $(".pfGrid li a").removeClass( "pfActive");
        }
    });
});
</script>

问题是：当我加载页面并单击第一张图像时，信息框显示出来。当我然后单击第二个图像时，该框显示但也立即隐藏。再次单击它会显示。然后单击第三个图像，信息框显示，两次后面的第四个，依此类推......

经过一些调试后，我发现问题出在$(".pfInfo").slideUp("normal", function() { $(".pfInfo").remove(); } );之内。我已经尝试了if-else等的其他构造，但还没有得到答案。

同时检查此JSFiddle。

Answer 1

你去吧

$(document).ready( function() {
    $(".pfGrid li a").on("click", function(e) {
        e.preventDefault();

        // the problem seems to be in this line:
        $(".pfInfo").slideUp("normal", function() { $(this).remove(); } );
        //partially correct - when the slideUp animation, your previous function used to
        // also remove the newly created .pfInfo element - hence the $(this) replacement

        if( !$(this).hasClass("pfActive") ) {
            $(".pfGrid li a").removeClass( "pfActive");

            $(this).parent().append('<div style=\"display:none;\" class=\"pfInfo\">blaa<br /><br />bla<br />bla</div>');
            $(this).next().slideDown();
                 //second change, again the $('.pfInfo') was replaced with .next()
            $(this).addClass("pfActive");
        }
        else {
            $(".pfGrid li a").removeClass( "pfActive");
        }
    });
});

希望这能为你的问题带来一些启示

PS

小提琴js是要走的路：D

两次点击后弹出div显示而不是一次

1 个答案: