樹遍歷的問題，找到要可變使用的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和show 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 + more的部分。 目的是使該變量對於具有相似命名約定的多個不同部分是可變的，而不必在我的腳本內的列表中硬編碼這些部分的名稱。

希望這是有道理的，我對文字牆表示歉意，只是想確保我傳達了我想做的事情和所在。 如果我的邏輯不正確，或者有更簡單的方法可以做到，那么我無所不包！ 謝謝。

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

Answer 1

由於您正在使用類（ sectionhide ）來切換可見性，因此您可以研究.toggleClass方法。

它有一個重寫的構造函數，可以接受2個參數， className和state （ 一個布爾值 ）

基於此state ，它將添加/刪除類。 True表示添加 ， false表示刪除

---

$('.minushide, .contbtn').on("click", function() {
  var container = $(this).closest('.container');
  var nextContainer = container.next('.container').length > 0 ? container.next('.container') : container.prev('.container');
  container.toggleClass('sectionhide', true)
  nextContainer.toggleClass('sectionhide', false)
})

樣品小提琴

注意：我在兩個div都添加了一個通用類container以具有通用模式

---

對於輪播行為，您可以使用index來查找要顯示的元素的索引並隱藏所有元素。

樣品小提琴

Answer 2

您忘記在js的倒數第二行的sid中附加'＃'字符

更新的小提琴
$('#'+sid).slideDown(2000);