Javascript Jquery如果单击，如何触发函数？

我正在尝试创建一个简单的错误消息，该消息应该在单击页面时显示

这是我的JSFIDLE：

我想在页面上单击时隐藏.super消息，此时消息是可见的

以下是我的jquery：

// show super on click
$('.error').click(function(e) {
    e.preventDefault();
    var position = $(this).position();
    $('.super').css({
        display: 'block',
        position: 'absolute',
        left: position.left + 50,
        top: position.top
    });
    var super = true
});


// If .error clicked then enable the function to remove the super message
if ($('.error').show()) {
    $(document).click(function() {
        $('.super').hide();
    });
}


// If .error clicked then enable the function to remove the super message
if ($('.error').show()) {
    $(document).click(function() {
        $('.super').hide();
    });
}

问题是这部分代码不起作用：

if ($('.error').show()) {
    $(document).click(function() {
        $('.super').hide();
    });
}

---

单击.error时不会追加任何内容，因为当.super不可见时，该函数也处于活动状态

为什么不添加一个名为active或visible的类

$('.error').click(function (e) {
e.preventDefault();
var position = $(this).position();
$('.super')
   .show()
  .css({display: 'block', position: 'absolute', left: position.left + 50, top: position.top})
.addClass("active");
});

$(document).click(function() {
   if($('.super').hasClass("active"))
     $('.super').removeClass("active").hide();
});

您的错误在if语句中，在执行任何检查之前必须先发生事件

编辑：

看着你的js小提琴，我意识到我犯了一个错误，应该是e.stopPropogation，下面是一个完整的工作代码：

$(document).click(function(e) {
    if($('.super').hasClass("active"))
        $('.super').hide();
});

$('.error').click(function(e) {
    e.stopPropagation();
    var position = $(this).position();
    $('.super').fadeIn(250).css({
        display: 'block',
        position: 'absolute',
        left: position.left + 50,
        top: position.top
    }).addClass("active");
});

---

你需要澄清一下你的问题。请参见代码中的不完全清楚部分，但看起来您需要：可见，而不是显示。ie-if$'.error:visible{}问题是，当单击带有.error类的链接时，由于触发了文档单击函数，并且超级div被隐藏，因此div.super没有显示。隐藏超级div的文档单击仅在超级div可见时才应处于活动状态。您能告诉我如何在页面上隐藏超级div吗？仅在超级div可见时单击？为什么我应该使用一个叫做active或visable的类？更新了我的答案，为什么你应该使用一个类？它使检查某些东西是否处于活动状态变得更容易，加上类可以附加一些css样式，我一直在使用这个方法@Rails初学者-有意义吗？它不工作，div在单击时不显示。我认为这是因为如果$'.super'.hasClassactive在单击元素的同时被激活。@Railsbeginner-请参阅更新的代码，我已经添加了.show，当您执行e.prevent时，默认事件不会扩散到文档中，因此此文档单击事件将永远不会发生…但单击时div仍不会出现。if语句中也缺少{}