Question

注意

我想我可以在没有jsfiddle的情况下解释这一点。我将避免显示整个代码，因为有太多的HTML，我必须适应这个例子。

另外，请原谅我糟糕的英语。我希望你能理解我。我正在学习。

重点是

当用户激活相应按钮时，我有一些模块覆盖我的界面。我希望所有模块在打开时都做同样的动画。

现在怎么样？

现在我一遍又一遍地重复相同的代码（下面），但指向每个模块及其各自的按钮......我在javascript方面是新手，但我知道这是反性能......我觉得我可以做得更干净。

我怀疑

有没有办法用这个代码制作一个函数或什么东西，让它适用于我想要的所有模块，而不是一次又一次地重复它？

$('#btn-moduleX, #close-moduleX').on('click', function(){
    $( "#btn-moduleX" ).toggleClass('layout-color-subBase');
    $( "#overlay-moduleX" ).toggleClass('overlay--hidden');

    var currentOpacity = $('.fx-appear-soft').css('opacity');
    $( ".fx-appear-soft" ).animate({
        'opacity': 1 - currentOpacity
    }, 300);
});

Answer 1

让我们假设您的按钮看起来像这样：

udp port 5361 and udp[10:2]==0x8C61

我们要做的是删除id并添加对于所有按钮和<a id="btn-moduleX" href="#">Button</a>属性都相同的类名，我们在其中编写相关的模块名称。

data-module

新的JavaScript代码：

<a class="jsCloseModule" href="#" data-module="moduleX">Button</a>

这只是一个例子。您的应用程序可以进行更多优化，所有像$('.jsCloseModule').on('click', function(){ var moduleName = $(this).data('module'); $( "#btn-" + moduleName ).toggleClass('layout-color-subBase'); $( "#overlay-" + moduleName ).toggleClass('overlay--hidden'); var currentOpacity = $('.fx-appear-soft').css('opacity'); $( ".fx-appear-soft" ).animate({ 'opacity': 1 - currentOpacity }, 300); });这样的ID也可以更改为类。

jQuery性能|避免重复代码

1 个答案: