当其他 div 可见时，jQuery 通过 id 隐藏 div？

Question

我有四个属于同一类的 div。每个 Div 有一个单独的 ID，1,2,3,4。 如果任何其他 div 可见，我想使用 jQuery 隐藏我的“div id 1”，反之亦然，因此如果“Div Id 4”可见，则所有其他 div 将被隐藏。

我是 jQuery 的新手，所以我想了解如何做到这一点。如果有人能告诉我如何做到这一点，我将不胜感激。

$(document).ready(function() {
  if  ($("#tracker2").is(":visible")) {
    $("#tracker1").hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stages" id="1">Supplier Contacted</div>
<div class="stages" id="2">Supplier Registered</div>
<div class="stages" id="3">Audit Complete</div>
<div class="stages" id="4">Decision Made</div>

Answer 1

这将隐藏所有阶段，因为它将匹配类 .stages 的所有元素

$('.stages').hide();

这将仅显示 ID 为 2 的舞台:

$('#stage-2').show();

您需要更改您的 ID，以便它们带有文本前缀，因为如果 ID 仅是数字，则并非在所有情况下都有效。所以你的 html 应该是:

<div class="stages" id="stage-1">Supplier Contacted</div>
<div class="stages" id="stage-2">Supplier Registered</div>
<div class="stages" id="stage-3">Audit Complete</div>
<div class="stages" id="stage-4">Decision Made</div>

您还需要获取所单击项目的 ID，我假设您已经在执行此操作以进入此阶段。您会发现，一旦进入单击处理程序，您就可以使用 this 关键字来引用刚刚单击的内容，因此:

$(this).show();

应该足够了。事实上，这更好，因为您现在可以从 HTML 中完全删除 ID，除非您需要它们用于其他用途

我的fiddle here shows this - 虽然我还用 css 中的不透明度设置替换了显示和隐藏，所以隐藏的元素实际上仍然是可点击的!