javascript - 树遍历问题，查找要可变使用的 div ID - jquery

Question

所以我一直在努力解决这个问题，但我做空了。我真的尝试尽我所能来寻找答案，包括 jQuery API 文档和其他 SO 帖子。我觉得我快到了，但我要么误解了什么，要么我没有正确地接近这个目标。

对于多个不同的部分，我在单独的 div 中有 2 个可点击图标，加载时显示 1 个(比如说 iconA)，加载时隐藏 1 个(iconB)。单击(iconA)时，它隐藏(iconA)所在的[sectionA]，然后显示(iconB)所在的[sectionB]。然后我希望 (iconB) 隐藏 [sectionB] 并显示 [sectionA]。

显然我不能使用切换，因为其中一个部分在任何给定点总是隐藏。由于我正在尝试编写可用于多个部分和多个具有不同名称的图标的脚本，因此我不能只为所有图标和部分设置 1-1 类名称。

我创建了一个 jsfiddle 来说明。下面我将写一个简单的例子。

HTML:

<div class="sectionAparent>
   <div class="sectionA" id="example>
      <i class="fa fa-code contbtn">iconA (shown on load)</i>
   </div>
</div
<div class="sectionB" id="exampleSHOW">
   <i class="fa fa-minus minushide">iconB (hidden on load)</i>
</div>

jQuery:

$('.contbtn').click(function(){
    var contid = $(this).attr('id');
    $('#'+contid+'show').slideToggle(1000);
    $(this).hide(1000);
});

-第一个是隐藏 sectionA 并显示 sectionB，效果很好。

$('.minushide').click(function(){
    var cbtn = $(this).closest('.sectionB').siblings('.sectionAparent').find('div[id]');
    var cid = $(cbtn).attr('id')
   $('#'+cid+'show').slideUp(1000);
   $(cid).slideDown(1000);
});

-所以我的想法是跳到最近的祖先，它是包含我需要的 ID 的部分的兄弟。然后找到具有该 ID 的 div，检索该 ID，并使用它显示包含该 ID 的部分并隐藏具有 ID+更多的部分。目标是使其对于具有相似命名约定的多个不同部分是可变的，而不必在我的脚本中的列表中对部分名称进行硬编码。

希望这是有道理的，我为文字墙道歉，只是想确保我传达了我正在尝试做的事情以及我所处的位置。如果我的逻辑不正确或者有更简单的方法来做到这一点，那么我洗耳恭听!谢谢。

https://jsfiddle.net/dankbawls/wnjxwyfy/

Answer 1

您忘记在 js 的倒数第二行中将 '#' 字符附加到 sid

Updated fiddle
$('#'+sid).slideDown(2000);