Question

我有一个页面，其中包含一个调用菜单模式的按钮。模态包含两个调用两个子菜单的按钮 - 每个按钮一个。看笔： https://codepen.io/t411tocreate/pen/yoxJGO

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

$('.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');
  })
});

当然，这种情况不会起作用。如何让我的代码干？

Answer 1

使用标记：

<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');
})

使用特定的类名来分别识别页面上的每个元素几乎没有价值。类名应该定义一个行为相同的类元素。

Answer 2

试试这个：

var menus = [1, 2];

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

Answer 3

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

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

因此数据子菜单用于配对触发器和模态。通过这种方式，您可以坚持使用易于阅读的HTML代码和一小段jquery。

Answer 4

你也可以使用它。

$('.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');
} 
})

最好将show-submenu-1（如showmenu）和子菜单-1（作为子菜单）放在同一个父元素中，以允许您使用closest()方法并简化生活

例如：

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

javascript - 避免重复代码

4 个答案: