javascript - évite le code répétable

Question

J'ai une page avec un bouton qui appelle un menu modal. Le modal contient deux autres boutons qui appellent deux sous-menus - un pour chaque bouton. Regardez le stylo: https://codepen.io/t411tocreate/pen/yoxJGO

Cela fonctionne réellement. Mais le problème actuel est que je ré-écrire un code répétitif pour appeler chaque sous-menu:

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

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

Cette approche semble être assez stupide. Je besoin d'une solution avec moins de répétitions, quelque chose comme la fonction forEach pour les tableaux:

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

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

Bien sûr, ce scénario ne fonctionnera pas. Comment puis-je rendre mon code SEC?

Answer 1

Salut J'espère que j'ai bien compris la question mais que vous pourriez utiliser des attributs de données pour quelque chose comme ça. Définissez simplement une classe générale pour .show-submenu et marquez leur connexion aux menus avec un nombre dans un attribut data-submenu = x. Où x serait le nombre dans .submenu-x. Et puis vous faites quelque chose comme ceci: Notez que j'ai changé .show-submenu-1 à .show-submenu. Assurez-vous que chaque déclencheur a cette classe. Ajoutez également un sous-menu de données = x pour chaque sous-menu que vous voulez utiliser.

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

Ainsi, le sous-menu de données est utilisé pour coupler le déclencheur et le modal. De cette façon, vous pouvez vous en tenir à un code HTML facile à lire et un peu de jquery.

Answer 2

Essayez ceci:

var menus = [1, 2]; 

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

Answer 3

Vous pouvez utiliser aussi.

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

il serait préférable d'avoir votre show-sous-menu-1 (showmenu) et le sous-menu-1 (sous-menu) en même élément parent qui vous permet d'utiliser la méthode closest() et rendre la vie facile

pour exemple:

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

Answer 4

Utilisez des marqueurs:

<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"> 

Puis:

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

Il est inutile d'utiliser des noms de classes si spécifiques qu'ils identifient individuellement chaque élément de la page. Les noms de classe doivent définir une classe des éléments qui se comportent de la même manière.