javascript - jQuery 检查元素在 if 语句中是否可见不起作用

Question

我需要一个功能，一次只显示一个选定的 div。除了 if 语句之外，我几乎可以正常工作。我希望按钮隐藏 div(如果它已经显示)。但它不起作用，我不明白为什么。感谢您的帮助。

jQuery(function() {
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').hide();
    if (jQuery('#div' + $(this).attr('target')).is(":visible")) {
      jQuery('.targetDiv').hide();
    } else {
      jQuery('#div' + $(this).attr('target')).slideToggle();
    }
  });
});

.targetDiv {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="showSingle" target="1">Div 1</button>
<button class="showSingle" target="2">Div 2</button>
<button class="showSingle" target="3">Div 3</button>
<button class="showSingle" target="4">Div 4</button>
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

Answer 1

函数的第一行隐藏所有 DIV:

$(".targetDiv").hide();

所以当它测试目标 DIV 是否可见时，它不可见，因为你只是隐藏了它。您应该隐藏除目标之外的所有 DIV:

$(".targetDiv:not(#div"+$(this).attr("target")+")").hide();

jQuery(function() {
  jQuery('.showSingle').click(function() {
    var targetID = '#div' + $(this).attr('target');
    jQuery('.targetDiv:not('+targetID+')').hide();
    if (jQuery(targetID).is(":visible")) {
      jQuery('.targetDiv').hide();
    } else {
      jQuery(targetID).slideToggle();
    }
  });
});

.targetDiv {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="showSingle" target="1">Div 1</button>
<button class="showSingle" target="2">Div 2</button>
<button class="showSingle" target="3">Div 3</button>
<button class="showSingle" target="4">Div 4</button>
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>