触发一个函数（JavaScript、jQuery），应该很简单

我有两个功能。注意两个函数中定义何时触发和执行的第一行的不同。两个函数相似，函数1显示默认情况下不可见的部分。Function2以更好的方式实现了几乎相同的功能，它可以向下滑动，并且具有很好的动画效果。 职能1：

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

职能2：

问题是，函数2只触发带有类toggleMUSIC的按钮，这给了我对该类的单个按钮的限制。现在我想添加更多具有相同行为和不幸的是相同类的按钮，这会导致函数混乱，并且它不能正常工作，因为它有多个具有类toggleMUSIC的元素

函数1显示了我希望它是如何通过ID触发的。我标记了相关div的ID。这个div将通过这个命令隐藏或显示给按钮元素到html代码

---

如果您希望能够通过ID触发并保留函数1的“易用性”，那么您可能希望将函数2包装成一个实际的、可调用的函数：

var function = toggleMusic(id) {
        if ($('#' + id).hasClass('showsection')) {
            $('#' + id).next().removeClass('showsection');
            $('#' + id).next().slideUp(200);
        } else {
            $('#' + id).parent().parent().find('li .inner').removeClass('showsection');
            $('#' + id).parent().parent().find('li .inner').slideUp(200);
            $('#' + id).next().toggleClass('showsection');
            $('#' + id).next().slideToggle(200);
        }
}

然后，您可以再次使用onclick事件，例如onclick=toggleMusic'helper1'； 您可以用变量替换上述函数中的$+id，以提高可读性

---

这里的关键是实现$'.toggleMUSIC'。ClickFunction会自动将“click listener”添加到具有toggleMUSIC类的所有元素中。既然你不想要这个，那就不要添加这个功能。

我不知道你到底想问什么。由于您的第二个函数似乎根据“this”上下文选择所有内容，因此当您尝试将其应用于多个元素时，不清楚到底是什么原因导致您出现问题。//与您的问题相关的代码以文本形式直接属于您的问题，而不仅仅是图像。请创建一个适当的函数来重现您的问题。C好的，您将如何更改函数2的第1行，使其与函数1的第1行非常相似？我尝试了这个，ofc调整了HTML，但没有成功。函数切换_visibility'id'{….比其他行保持不变，但没有成功。“如何更改函数2的第1行，使其与函数1的第1行非常相似？”-这仍然没有意义。1的第一行是var e=document.getElementByIdid；，2的第一行是e.preventDefault；-它们之间完全没有任何关系。你可能只是被变量名e在两种情况下都被使用的事实弄糊涂了吗…？啊哈，我明白了，我想我用的是worng单词。我明白了函数1的e this:函数toggle_visibilityid{和函数2的第1行this$'。toggleMUSIC'。单击函数e{。我认为这两个函数有一些共同点。我需要修复函数2的那一行。它应该类似于函数1的那一行，所以它侦听元素ID，而不是带有类的元素。两者已经有了根本性的不同，第一个函数需要从某个地方调用，而第二个函数绑定了一个click handler函数$'.toggleMUSIC'选择的所有元素。很好，它开始有意义了，我今天回家后会尝试一下。我需要学习更多关于听者的内容。我不想完全理解Javascript。尝试了几次之后失败了。我转向堆栈溢出，这是我自己使用的页面。感谢线索@Roel Strolenberg

var function = toggleMusic(id) {
        if ($('#' + id).hasClass('showsection')) {
            $('#' + id).next().removeClass('showsection');
            $('#' + id).next().slideUp(200);
        } else {
            $('#' + id).parent().parent().find('li .inner').removeClass('showsection');
            $('#' + id).parent().parent().find('li .inner').slideUp(200);
            $('#' + id).next().toggleClass('showsection');
            $('#' + id).next().slideToggle(200);
        }
}