2

一切都很好，除了一件事，我想要它，所以当你.show已经看到类时，当你点击另一个#c-div 时它会再次消失。

http://jsfiddle.net/7KdR6/1/

$('[id^="c-"]').each(function(i){
    $this = $(this);
    $(this).text(i);
    $(this).on('click',function(){
        $('.show').fadeIn().text(i);
        event.stopPropagation();
    });
})
$(document).on('click', function(){
     $('.show').fadeOut();
});
4

3 回答 3

2

您需要在可见元素上使用 fadeIn 之前隐藏元素

$('[id^="c-"]').each(function (i) {
    var $this = $(this);
    $this.text(i);
    $this.on('click', function () {
        $('.show').hide().fadeIn().text(i);
        event.stopPropagation();
    });
})

演示：小提琴

于 2013-09-02T03:20:55.267 回答
2

.hide()在调用之前尝试调用.fadeIn()。

演示小提琴

于 2013-09-02T03:22:43.080 回答
2

您的问题之一是您没有停止传播，因为event没有被定义。您必须使用click处理程序的参数。编辑：实际上，它看起来像是event自动通过的——我以前没有意识到这一点。但是，我仍然认为如果要使用它，最好将事件对象作为参数 - jQuery 在他们的示例中这样做，它使它更加明显。

我还注意到您正在缓存this但没有使用该缓存的 var。这意味着每次编写$(this)时，都必须重新包装该 jquery 对象。

然后你可以有一个fadeOut 并使用fadeIn 作为fadeOut 的回调。这样，如果.show元素已经显示，它将首先淡出。我会这样写：

$('[id^="c-"]').each(function (i) {
    $this = $(this);
    $this.text(i);
    $this.on('click', function (event) {
        event.stopPropagation();
        $show = $(".show");
        $show.fadeOut(function () {
            $show.fadeIn().text(i);
        });
    });
})

小提琴

于 2013-09-02T03:28:42.197 回答