Javascript onclick inlineの代わりにクラスを使用する

Question

私はonclickを有効にするためのクラスを使用してonclickイベントを行う方法を理解しています。はい、私は同様の投稿を見ましたが、私の質問に具体的に答えているものはありません。これは：

IDに基づいてコンテンツを非表示にするには、 'toggle'のようなonclickクラスをどのように切り替えることができますか？だから、私はid = 'blah' class = 'toggle'をID「blah」を使ってdivを切り替えるよりも上にすることができますか？

は、どのように私のようなアンカーリンクを持つことができます。私は、onclickイベントを使用することに基づいて、簡単なJavaScriptを使用しています

<a id="proc" class="coco button-link toggle" style="cursor: pointer;">See Our Proclamations</a> 

を、私はonclickイベントを使用しないようにしたいです。

<script> 
function toggle_visibility(id) { 
     var e = document.getElementById(id); 
     if(e.style.display == 'block') 
      e.style.display = 'none'; 
     else 
      e.style.display = 'block'; 
} 
</script> 

私はこのようなものを使用しようとしましたが、それは間違いなく動作しませんでした：

<script> 
    $(document).ready(function() { 
     $('a.toggle').click(function() { 
      var e = document.getElementById(id); 
      if(e.style.display == 'block') 
       e.style.display = 'none'; 
      else 
       e.style.display = 'block'; 
     }); 
    }); 
</script> 

は、残念ながら私はjavascriptの理解よりもはるかに良いPHPを理解..任意およびすべての助けをありがとう！

Answer 1

まず、切り替えたいリンクではありません。それ以外の場合はクリックすると消えてしまい、再度クリックすることはできません。表示または非表示にするコンテンツ領域です。

第2に、toggleClass()を呼び出すことができるときに、スタイルをスタイルと反対に設定しないでください。ただ、明確にする

$(document).ready(function() { 
 
    // Set up a common click event handler for each section's clickable header 
 
    // Note the addition of the callback function's "evt" argument. All event 
 
    // handlers are automatically passed a reference to the event that triggered them. 
 
    $('.sectionHeader').click(function(evt) { 
 
     
 
    // Just toggle the CSS class that hides the element on the element that comes 
 
    // just after the one that got clicked. Obviously, setting up the HTML structure 
 
    // correctly is what makes this work. 
 
    $(evt.target.nextElementSibling).toggleClass("toggle"); 
 
    }); 
 
});

section { margin-bottom:1em; height:20vh; } 
 
.toggle { display:none; } 
 
.sectionHeader { font-weight:bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <a id="procShowHide1" class="coco button-link sectionHeader" 
 
    style="cursor: pointer;">Section 1</a> 
 
    <div id="proc1"> 
 
       Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations 
 
       Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations     Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations     Proclamations Proclamations Proclamations Proclamations 
 
    </div> 
 
</section> 
 
<section> 
 
    <a id="procShowHide2" class="coco button-link sectionHeader" 
 
    style="cursor: pointer;">Section 2</a> 
 
    <div id="proc2"> 
 
       Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations 
 
       Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations     Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations     Proclamations Proclamations Proclamations Proclamations 
 
    </div> 
 
</section> 
 
<section> 
 
    <a id="procShowHide3" class="coco button-link sectionHeader" 
 
    style="cursor: pointer;">Section 3</a> 
 
    <div id="proc3"> 
 
       Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations 
 
       Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations     Proclamations Proclamations Proclamations Proclamations Proclamations Proclamations     Proclamations Proclamations Proclamations Proclamations 
 
    </div> 
 
</section>