javascript

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

试试这个：

var menus = [1, 2];

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

Answer 2

你也可以用这个。

$('.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）和 submenu-1（作为子菜单）放在同一个父元素中，这样您就可以使用 closest() 方法并让生活变得轻松

例如：

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

Answer 3

使用标记：

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

使用 class 非常具体以至于可以单独标识页面上的每个元素的名称几乎没有价值。类名应定义行为相同的 class 元素。

Answer 4

您好，我希望我答对了问题，但您可以将数据属性用于类似这样的事情。只需为 .show-submenu 设置一个通用 class 并在 data-submenu=x 属性中用数字标记它们与菜单的连接。其中 x 是 .submenu-x 中的数字。然后你做这样的事情：请注意，我将 .show-submenu-1 更改为 .show-submenu。确保每个触发器都有这个 class。还要为您要使用的每个子菜单添加一个 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.

javascript - 避免重复代码

javascript - avoid repetable code

jquery

user-interface

dry