Javascript onclick使用类而不是内联

Javascript onclick使用类而不是内联,javascript,jquery,Javascript,Jquery,我试图弄清楚如何使用一个类来执行onclick事件,以便为简单的隐藏显示启用onclick。是的,我看到过类似的帖子,但没有一个能具体回答我的问题。即: 如何切换像“toggle”这样的onclick类以根据ID隐藏和显示内容?所以我可以使用id='blah'class='toggle'而不是使用id'blah'来切换div 我怎样才能拥有像这样的锚链: <a id="proc" class="coco button-link toggle" style="cursor: pointer;

我试图弄清楚如何使用一个类来执行onclick事件,以便为简单的隐藏显示启用onclick。是的,我看到过类似的帖子,但没有一个能具体回答我的问题。即:

如何切换像“toggle”这样的onclick类以根据ID隐藏和显示内容?所以我可以使用id='blah'class='toggle'而不是使用id'blah'来切换div

我怎样才能拥有像这样的锚链:

<a id="proc" class="coco button-link toggle" style="cursor: pointer;">See Our Proclamations</a>
参见我们的公告
我使用的是基于onclick事件的简单javascript,但我不想使用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>

功能切换\u可见性(id){
var e=document.getElementById(id);
如果(e.style.display=='block')
e、 style.display='none';
其他的
e、 style.display='block';
}
我试着用这样的东西,但肯定没用:

<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>

$(文档).ready(函数(){
$('a.toggle')。单击(函数(){
var e=document.getElementById(id);
如果(e.style.display=='block')
e、 style.display='none';
其他的
e、 style.display='block';
});
});

不幸的是,我对PHP的理解远远超过了对javascript的理解。。谢谢你的帮助

首先,它不是您想要切换的链接,否则一旦单击它,它就会消失,您将无法再次单击它。它是应该显示或隐藏的内容区域

第二,当您可以调用
toggleClass()
时,不要将样式设置为与样式相反的样式

请参见下面的简单代码:

$(文档).ready(函数(){
//为每个节的可单击标题设置公共单击事件处理程序
//注意添加了回调函数的“evt”参数
//处理程序会自动传递对触发它们的事件的引用。
$('.sectionHeader')。单击(函数(evt){
//只需切换CSS类,该类会在出现的元素上隐藏该元素
//就在点击的那一个之后。显然,设置HTML结构
//正是这一点让这一切得以实现。
$(evt.target.nextElementSibling).toggleClass(“toggle”);
});
});
section{页边距底部:1m;高度:20vh;}
.toggle{显示:无;}
.sectionHeader{font-weight:bold;}

第一节
公告公告公告公告公告公告公告
公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告
第二节
公告公告公告公告公告公告公告
公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告
第三节
公告公告公告公告公告公告公告
公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告公告

只是澄清一下:您在项目中使用jQuery吗?或者你想要一种普通的Javascript方法?在第二个脚本中,您混合了jQuery和原生JS方法。您说您想做一个onclick,然后您说您想“不使用onclick”。在最后一个脚本中,使用
var e=this
应该可以使用。@mrlew我更喜欢使用普通的javascript方法。@ScottMarcus,我想使用onclick的操作,但要使用类来这样做,以免在内部使用物理onclick。我如何更改它,以便在一个页面上与多个可切换项一起使用?