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

这就是您所需要的：

jQuery(function() {
    jQuery('.showSingle').click(function(){
        jQuery('.targetDiv').slideUp();
        jQuery('#div'+$(this).attr('target')).slideToggle();
    });
});

演示：

jQuery('.showSingle').click(function() {
  jQuery('.targetDiv').slideUp();
  jQuery('#div' + $(this).attr('target')).slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>

已编辑：替换了 $(document).ready() 包装器，以防万一不理解

Answer 2

函数的第一行隐藏了所有 DIVs:

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

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

$(".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>

jQuery 检查元素在 if 语句中是否可见无效

jQuery check if element is visible in if statement not working

javascript

jquery

hide

show