条件不起作用

Question

下面是我的代码：

HTML：

<div id="a">
    aaa
</div>

<div id="b">
    <button>hide aaa</button>
</div>

<a href="#">link</a>

JS：

if($('#a:visible').length > 0) {
    $('a').click(function() {
        alert('a');
    });
}

$('button').click(function () {
    $('#a').hide();
});

http://jsfiddle.net/kgj4uw6f/

如果我点击“隐藏aaa”，然后点击链接，就会显示警报。我不想在隐藏#a时显示警报。如何更改我的代码？

Answer 1

它是由内而外的。当点击发生时，你必须检查可见性。

​

$('a').click(function() {
  if ($('#a:visible').length > 0) {
    alert('a');
  }
});

$('button').click(function() {
  $('#a').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a">
  aaa
</div>

<div id="b">
  <button>hide aaa</button>
</div>

<a href="#">link</a>
JS:

​

Answer 2

我把你的条件改成在click事件内部运行，如下所示：

$('a').click(function() {
    if($('#a:visible').length > 0) {
        alert('a');
    }
});

$('button').click(function () {
    $('#a').hide();
});

http://jsfiddle.net/kgj4uw6f/2/

Answer 3

这是另一种方法！可以使用$(element).is(":visible")检查图元的可见性。

$('a').click(function() {
     if($('#a').is(":visible")) {
        alert('a');
     }
 });


$('button').click(function () {
    $('#a').hide();
});