コンテナ内のdivを表示するには、リンクをクリックしてください。

Question

私は複数のコンテナ（li）を持っています。内部にはリンクがあります。クリックすると、一致するdivを開き（一致しないdivを非表示にする）必要があります。

divをループすることはできますが、divを開くか隠すことはできません。

Codepen：https://codepen.io/warddem/pen/kkzrPx

<ul> 
    <li> 
    <h3>Market study</h3> 
    <div> 
     <a href="#" data-toggle="#div1" class="showSingle">Results</a> 
     <a href="#" data-toggle="#div2" class="showSingle">Learned</a> 
     <a href="#" data-toggle="#div3" class="showSingle">Deliverables</a> 
     <a href="#" data-toggle="#close" class="">Close all</a> 
     <div id="div1" class="optionDiv">Results: </div> 
     <div id="div2" class="optionDiv">Learned: </div> 
     <div id="div3" class="optionDiv">Deliverables: </div> 
    </div> 
    </li> 
    <li> 
    <h3>Competitive research</h3> 
    <div> 
     <a href="#" data-toggle="#div1" class="showSingle">Results</a> 
     <a href="#" data-toggle="#div2" class="showSingle">Learned</a> 
     <a href="#" data-toggle="#div3" class="showSingle">Deliverables</a> 
     <a href="#" data-toggle="#close" class="">Close all</a> 
     <div id="div1" class="optionDiv">Results: </div> 
     <div id="div2" class="optionDiv">Learned: </div> 
     <div id="div3" class="optionDiv">Deliverables: </div> 
    </div> 
    </li> 
</ul> 

jQuery('.showSingle').click(function() { 

    var idOpen = $(this).siblings("div"); 
    var myIndex = $(this).index(); 

    if (idOpen.is("div")) { 
     // HIDE ALL DIVS IN PARENT 
     var divLength = idOpen.get(myIndex).id.length; 
     for (var i = 0, l = divLength; i < l; i++) { 
     console.log('divs to hide', idOpen[i]); 
     //HIDE DOESN'T WORK 
     //idOpen[i].hide(); 
     } 

     // HOW TO SHOW LINKED DIV ??? 
     console.log('div id to open: ', idOpen.get(myIndex).id); 
    } 

    }) 

Answer 1

は、IDのは、ユニークな作りから始め

。 （これはあなたが抱えている問題には関係していないようですが）

.get()要素を要素として返します。 jQuery関数はこれらに連鎖しません。 .eq()は、要素を新しいjQueryオブジェクトの一部として返します。

<ul> 
    <li> 
    <h3>Market study</h3> 
    <div> 
     <a href="#" data-toggle="#div1a" class="showSingle">Results</a> 
     <a href="#" data-toggle="#div2a" class="showSingle">Learned</a> 
     <a href="#" data-toggle="#div3a" class="showSingle">Deliverables</a> 
     <a href="#" data-toggle="#close" class="">Close all</a> 
     <div id="div1a" class="optionDiv">Results: </div> 
     <div id="div2a" class="optionDiv">Learned: </div> 
     <div id="div3a" class="optionDiv">Deliverables: </div> 
    </div> 
    </li> 
    <li> 
    <h3>Competitive research</h3> 
    <div> 
     <a href="#" data-toggle="#div1b" class="showSingle">Results</a> 
     <a href="#" data-toggle="#div2b" class="showSingle">Learned</a> 
     <a href="#" data-toggle="#div3b" class="showSingle">Deliverables</a> 
     <a href="#" data-toggle="#close" class="">Close all</a> 
     <div id="div1b" class="optionDiv">Results: </div> 
     <div id="div2b" class="optionDiv">Learned: </div> 
     <div id="div3b" class="optionDiv">Deliverables: </div> 
    </div> 
    </li> 
</ul> 

jQuery('.showSingle').click(function() { 

    var idOpen = $(this).siblings("div"); 
    var myIndex = $(this).index(); 

    if (idOpen.is("div")) { 
     // HIDE ALL DIVS IN PARENT 
     var divLength = idOpen.get(myIndex).id.length; 
     for (var i = 0, l = divLength; i < l; i++) { 
     console.log('divs to hide', idOpen[i]); 
     //HIDE DOESN'T WORK 
     idOpen.eq(i).hide(); 
     } 

     // HOW TO SHOW LINKED DIV ??? 
     idOpen.eq(myIndex).show(); 
     console.log('div id to open: ', idOpen.get(myIndex)); 
    } 

    });