ループ内のオブジェクトを隠すJavascript

Question

私を助けてください。リンクをクリックすると内線を隠したいのですが、何かが間違っています

しかし、私はこれだけ書くことができ、それがうまくいかない理由を打ち明けません！たぶん別の方法がありますか？それは毎回同じ機能を満たしています。 LI1 li2funcに、したがって、thereisは Link to jsfiddler

HTML LI1： `

<div> 

<div class="left"> 
<ul> 
     <li><a id="11" href="#">one</a></li> 
     <li><a id="12" href="#">two</a></li> 
     <li><a id="13" href="#">three</a></li> 
    </ul> 

    </div> 
    <div class="right"> 
    <p id="1"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, qui. 
    </p> 
    <p id="2"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus reiciendis veritatis voluptatibus optio explicabo? Dignissimos ex amet mollitia doloribus a. 
    </p> 
    <p id="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit porro quisquam harum nemo, vitae itaque.</p> 
    </div> 

</div>` 

JSコード：

var el = document.getElementsByTagName("p"); 
var cs = document.getElementsByTagName("a"); 
if(el) { 
    for (i = 0; i < el.length; i++) { 
     td = cs[i]; 
     (function (_td) { 
      td.addEventListener('click', function(){ 
       console.log(_td); 
       console.log(i); 
       document.getElementsByTagName("div")[i].className += document.getElementsByTagName("div")[i].className ? ' invis' : 'invis'; 
      }); 
     })(td); 

Answer 1

をあなたはJavaScriptを使用して、いくつかの問題を抱えています。あなたはjavascriptコンソールでこのエラーに気づいたはずです： "Uncaught TypeError：未定義の 'className'プロパティを読み取ることができません。これにより、document.getElementsByTagName("div")が使用するセレクタではないことがわかりました。 pタグの配列を作成する作業を行いましたが、作成したクロージャー内の参照は一切作成しませんでした。あなたの閉鎖第二引数を与え、あなたはクリックハンドラを結合しているためにどのaタグに対応する番号（i）のpタグを渡す：

は、ここでその問題を解決する一つの方法です。次に、classNameの文字列を要素に変更します。

var el = document.getElementsByTagName("p"); 
var cs = document.getElementsByTagName("a"); 

if(el) { 
    for (i = 0; i < el.length; i++) { 
     td = cs[i]; 
     ptag = el[i]; 
      (function (_td,_el) { 
     td.addEventListener('click', function(){ 
      console.log(_td); 
      console.log(i); 
      _el.className += _el.className ? ' invis' : 'invis'; 
     }); 
    })(td,ptag); 
    } 
} 

もうひとつ：ユーザーがクリックしたときにそのiをクリックハンドラの範囲ではなく、forループの外側の範囲にバインドされ、そうされていないので、あなたがconsole.log(i)は、常に3を作り出すことに気づくでしょうがaタグの一つは、ループがすでに完了しているとiは常に同じ3

Answer 2

あなたはこれがあるjqueryをタグ付けしますが、どのようにHREFの最も近いのLi index()使用してjQueryので行うことができます

あなたのコード内（エル）が不要であるので、もし

$('ul > li > a').on('click' , function(){ 
 
    var ThisId = $(this).closest('li').index(); 
 
    $('div.right > p:eq('+ThisId+')').slideToggle(100); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 

 
    <div class="left"> 
 
    <ul> 
 
     <li><a id="11" href="#">one</a></li> 
 
     <li><a id="12" href="#">two</a></li> 
 
     <li><a id="13" href="#">three</a></li> 
 
    </ul> 
 

 
    </div> 
 
    <div class="right"> 
 
    <p id="1"> 
 
     1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, qui. 
 
    </p> 
 
    <p id="2"> 
 
     2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus reiciendis veritatis voluptatibus optio explicabo? Dignissimos ex amet mollitia doloribus a. 
 
    </p> 
 
    <p id="3">3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit porro quisquam harum nemo, vitae itaque.</p> 
 
    </div> 
 

 
</div>

Answer 3

document.getElementsByTagNameは、nullを返すことはありません。空の配列は常にtrueと評価されます。あなたは3私が等しくない場合は、あなたは、それが0である、現時点で閉鎖にそれを追加する必要が1、および2.私はそれがここに_indexと呼ばれる：ここで

var paragraphs = document.getElementsByTagName("p"); 
var links = document.getElementsByTagName("a"); 

for (i = 0; i < paragraphs.length; i++) { 
    link = links[i]; 
    paragraph = paragraphs[i]; 
    (function (_link,_paragraph, _index) { 
     _link.addEventListener('click', function(){ 
      console.log(_link); 
      console.log(_index); 
      _paragraph.classList.toggle('invis'); 
     }); 
    })(link,paragraph, i); 
} 

はクリーナーバージョン

です

function init(link, paragraph, index) { 
    link.addEventListener('click', function(){ 
     paragraph.classList.toggle('invis'); 
    }); 
} 

var paragraphs = document.getElementsByTagName("p"); 
var links = document.getElementsByTagName("a"); 

for (i = 0; i < paragraphs.length; i++) { 
    init(links[i], paragraphs[i], i); 
}