fonction onclick unique pour les boutons avec un modèle id similaire - JavaScript

Je veux réduire le code.fonction onclick unique pour les boutons avec un modèle id similaire - JavaScript

function one() { 
console.log("hai"); 
} 

document.getElementById('dealsButton_1').onclick = one; 
document.getElementById('dealsButton_2').onclick = one; 
//I want the above 2 lines of code reduced to one.

Une seule fonction pour le clic sur les éléments d'identificateur à motifs 'dealsButton_ *'. Comment puis-je faire ceci. Les éléments sont chargés dynamiquement.

Source

2017-08-18 Dexter

Si 'one' et' two' font la même chose, pourquoi avoir des fonctions? – PeterMader

Ok désolé. Attendez ma modification. – Dexter

Utilisez la délégation d'événement à un élément parent statique, vérifiez la propriété id de l'élément cible, puis appelez la fonction appropriée s'ils correspondent –

Vous pouvez utiliser querySelectorAll et le sélecteur [id^=dealsButton_] pour ajouter l'écouteur d'événement dans une seule ligne - voir la démo ci-dessous:

function one() { 
 
console.log("hai"); 
 
} 
 

 
Array.prototype.forEach.call(
 
    document.querySelectorAll('[id^=dealsButton_]'), function(e) { 
 
    e.addEventListener('click', one); 
 
});

<div id="dealsButton_1">one</div> 
 
<div id="dealsButton_2">two</div>

Si le balisage est dynamiquement chargé vous pouvez base sur un stat ic élément comme ceci:

function one() { 
 
    console.log("hai"); 
 
} 
 

 
document.addEventListener('click', function(e) { 
 
    if (e.target && /^dealsButton_/.test(e.target.id)) 
 
    one(); 
 
}) 
 

 
// dynamically add 
 
document.body.innerHTML = `<div id="dealsButton_1">one</div> 
 
<div id="dealsButton_2">two</div>`;

Source

2017-08-18 09:40:40 kukkuz

Je pense que votre réponse manque toujours la nuance la plus importante: * "Les éléments sont chargés dynamiquement . "* – dfsq

@dfsq a édité la réponse, merci pour le heads up :) – kukkuz

Sans un Regexp:' si (e.target && e.target.matches ('[id^= dealsButton_]') {...} ' – PeterMader

Vous cherchez quelque chose comme ceci:

function onClick(){ 
    //single handler 
} 

$('[id*="dealsbutton_"]').click(onClick)

Source

2017-08-18 09:42:06

Voici une solution où vous pouvez choisir le nom d'ID comme u souhaitent sans spécifique modèle de nom.

<html> 
    <body> 
    <div id="abc">one</div> 
    <div id="def">two</div> 

    <script type="text/javascript"> 
     function one() { 
     console.log("hai"); 
     } 

     function addOnclickFunc (func, idArray){ 
     idArray.forEach(function(element) { 
      document.getElementById(element).onclick = func; 
     }) 
     } 

     addOnclickFunc(one,["abc","def"]) 
    </script> 
    </body> 
</html>

Source

2017-08-18 09:50:10 Nolyurn

-1

vous utilisez jQuery avec regex pour cette

$.each($("button[id^='dealsButton_']"), function() { 
$(this).on('click', function(){ 
    //code here 
}) 
});

si vous voulez faire les noms d'appel de fonction dynamique. passez-le comme attribut de données à l'élément bouton et appelez-le en utilisant la fonction eval

<button id="dealButton_1" data-click="one"></button> 

$.each($("button[id^='dealsButton_']"), function() { 
$(this).on('click', function(){ 
    var function_call = $(this).attr('data-click') 
    eval(function_call) 
}) 
});

Source

2017-08-18 09:54:34

fonction onclick unique pour les boutons avec un modèle id similaire - JavaScript

Répondre

Questions connexes