javascript - 避免可重复的代码

我有一个页面，其中包含调用菜单模式的按钮。模态包含另外两个按钮，它们调用两个子菜单 - 每个按钮一个。看笔： https://codepen.io/t411tocreate/pen/yoxJGO javascript - 避免可重复的代码

它确实有效。但目前的问题是，我重新写一个可重复的代码来调用每个子菜单：

$('.show-submenu-1').on('click', function() { 
    $('.submenu-1.offcanvas').addClass('offcanvas--active'); 
}) 

$('.show-submenu-2').on('click', function() { 
    $('.submenu-2.offcanvas').addClass('offcanvas--active'); 
})

这种方法似乎很愚蠢。我需要用更少的重复的阵列的解决方案，类似的forEach功能：

var menus = [ 
    '.show-submenu-1', 
    '.show-submenu-2' 
]; 

menus.forEach(function(menu){ 
    $(menu).on('click', function() { 
    $(`${menu}.offcanvas`).addClass('offcanvas--active'); 
    }) 
});

当然，这种情况下将无法正常工作。我怎样才能让我的代码干？

来源

2017-08-25 t411tocreate

我只是看了一下codepen，所以我可能会错过一些东西，但是你不能在子菜单1和子菜单2中使用相同的CSS类吗？他们似乎风格一致，而且这会让你免于重复自己，我想。也许只是作为一个班的子菜单？ –

难道你不能从数组项中移除'.show-'并将它添加到选择器中进行绑定吗？ '$（\'.show - $ {menu} \'）.on（）' – spanky

嗨，我希望我得到了正确的问题，但你可以使用数据属性这样的东西。只需为.show-submenu设置一个通用类，并使用data-submenu = x属性中的数字标记它们与菜单的连接。其中x将是.submenu-x中的数字。然后你做这样的事情：请注意，我将.show-submenu-1更改为.show-submenu。确保每个触发器都有这个类。还要为每个要使用的子菜单添加一个数据子菜单= x。

$('.show-submenu').on('click', function() { 
    var number = $(this).attr("data-submenu"); 
    var selector = '.submenu-' + number + '.offcanvas' 
    $(selector).addClass('offcanvas--active'); 
})

因此，数据子菜单用于配对触发器和模态。这样你就可以坚持一个简单易懂的html代码和一小段jquery。

来源

2017-08-25 21:59:57

试试这个：

var menus = [1, 2]; 

menus.forEach(index => { 
    $(`.show-submenu-${index}`).on('click',() => { 
    $(`.submenu-${index}.offcanvas`).addClass('offcanvas--active'); 
    }); 
});

来源

2017-08-25 21:49:00 alexmac

您的解决方案很有趣，但我从未见过这种语法。是否告诉在var索引中将菜单项（在本例中为1和2）引入到foreach中，然后用当前索引值填充$ {index}？是否有一个特殊的图书馆或框架（除了jquery当然）？ –

此功能名称是_template strings_，JavaScript本身支持它，从ES6开始[https：//developer.mozilla。组织/ EN /文档/网络/的JavaScript /参考/ Template_literals（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals）。 – alexmac

我看了一下模板文字，他们看起来非常有用，谢谢你的阐述:) –

-1

您可以使用这一点。

$('.show-submenu-1, .show-submenu-2').on('click', function (event) { 
$(event.target).hasClass('show-submenu-1'){ 
    $('.submenu-1.offcanvas').addClass('offcanvas--active'); 
}else{ 
    $('.submenu-2.offcanvas').addClass('offcanvas--active'); 
} 
})

这将是最好有你的节目，子菜单-1（如showmenu）和子菜单-1（如子菜单）在相同的父元素，使您可以使用closest()方法，使生活更轻松

对于如：

$('.show-submenu').on('click', function (event) { 
    $(event.target).closest('.submenu').addClass('offcanvas--active'); 
    })

来源

2017-08-25 21:49:27

这将导致点击子菜单2影响子菜单1 – Taplar

使用标记：

<div class="submenu" data-index="1"> 
<div class="submenu" data-index="2"> 

<button class="show-submenu-button" data-submenu-index="1"> 
<button class="show-submenu-button" data-submenu-index="2">

然后：

$('.show-submenu-button').on('click', function() { 
    var index = $(this).attr('data-submenu-index'); 
    $('.submenu[data-index="' + index + '"]').addClass('offcanvas--active'); 
})

使用那些特定的类名是没有多大价值的，它们可以单独识别页面上的每个元素。类名应该定义一个类的行为方式相同的元素。

来源

2017-08-25 21:49:49 McHat

javascript - 避免可重复的代码

回答

相关问题