javascript - 如果存在具有特定类的 div，则显示内容

Question

我有一个具有 iframe 的表单，我必须使用另一家我无法控制更改的公司。我的访问者很难理解表单，我想添加说明，但这很难，因为表单有不同的“页面”或步骤，我只想显示该特定步骤的一段说明。

我知道这可能不太成功，但下面是表格示例和我想做的事情。

<!-- SHOW ONLY IF ID PAGE1 HAS THE CLASS OF CURRENT-PAGE -->
<div class="my-content">My Content</div>

<!-- SHOW ONLY IF ID PAGE2 HAS THE CLASS OF CURRENT-PAGE -->
<div class="my-content">My Content</div>

<!-- SHOW ONLY IF ID PAGE3 HAS THE CLASS OF CURRENT-PAGE -->
<div class="my-content">My Content</div>

<!-- SHOW ONLY IF ID PAGE4 HAS THE CLASS OF CURRENT-PAGE -->
<div class="my-content">My Content</div>

<!-- THIS IS THE FORM -->
<div class="form-name">
   <div class="current-page" ID="page1"> Page 1 questions </div>
   <div class="page" ID="page2"> Page 2 questions </div>
   <div class="page" ID="page3"> Page 3 questions </div>
   <div class="page" ID="page4"> Page 4 questions </div>
</div>

当我转到下一页时，它会更改 div 的类，因此第 2 页不是当前页面，并且会显示新内容。我希望我的 div 仅在 div 类是该页面的“当前页面”时显示。

Answer 1

已编辑

使用 $.eq()、$.index()、$.show() 和 $.hide()

var content = $('div.my-content').hide();//get all and hide
var i = $('div.current-page').index();//get index of the current
content.eq(i).show();//show selected index

或内联

$('div.my-content').hide().eq($('div.current-page').index()).show();