Question

我有两个职能。注意，这两个函数定义了何时触发和执行的第一行的区别。这两个函数都是相似的，函数＃1显示默认情况下不可见的部分。 Function＃2的功能差不多，只是滑动得更好，动画效果也不错。
功能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：

$('.toggleMUSIC').click(function(e) {
    e.preventDefault();
    var $this = $(this);
    if ($this.next().hasClass('showsection')) {
        $this.next().removeClass('showsection');
        $this.next().slideUp(200);
    } else {
        $this.parent().parent().find('li .inner').removeClass('showsection');
        $this.parent().parent().find('li .inner').slideUp(200);
        $this.next().toggleClass('showsection');
        $this.next().slideToggle(200);
    }
});

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

功能1显示了我希望如何实现-按ID触发。我通过此命令将相关div的ID（此div将被隐藏或显示）标记为html代码<a class="helper_button" onclick="toggle_visibility('helper1');">的按钮元素。我不确定我是否使用正确的术语，是否为我的问题提供了足够的资源，如果需要，请告诉我。

老实说，令人难以置信的是，我奇迹般地编写了这些函数，尝试并尝试直到它起作用为止，但是很久以前，不幸的是，我对此并不完全了解。

还附加了这两种功能的HTML，以获得更好的图像。

Answer 1

如果您希望能够通过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').click(function(e)自动向所有类toggleMUSIC的元素添加一个“单击侦听器”。由于您不想要此功能，因此只需添加一个功能即可。

触发函数（JavaScript，jQuery），它应该很简单

1 个答案: