トリガーボタンのクリックをjavascriptでですか？ここ

Question

は私buttonコードです：

<button class="popup-trigger" data-modal="modal-1"></button> 

は、どのように私は、ボタンをクリックしたり、データ・モーダルmodal-1でクラスpopup-triggerをトリガトリガすることができますか？

あなたがそれを行うことができない場合、純粋なjavascriptで知りたい、jquery。

が

document.getElementById("myButton").click(); 

Answer 1

は、あなたのDOM要素を検索し、その後、クリックメソッドを呼び出します：

// Since there can be multiple elements with the class "popup-trigger", it returns an array. Putting the [0] will call the first button with the class "popup-trigger". 
 
var myButton = document.getElementsByClassName("popup-trigger")[0]; 
 
// If you wanted to check clicks on ALL buttons with the class, remove the [0] at the end. 
 

 
// Check for clicks on the button 
 
myButton.onclick = function(e) { 
 
    alert(e.target.getAttribute("data-modal")); 
 
}

<button class="popup-trigger" data-modal="modal-1">Button</button>

私はそれを説明するコメントを挿入します。ご質問がある場合はお知らせください。

Answer 2

第二に、純粋なJavaScriptではjQueryの

<button id="my-btn" class="popup-trigger" data-modal="modal-1"> </button> 
<script> 
$("#my-btn").click(function(){ 
//do something here 
}) 
</script> 

Answer 3

を使用しての方法

<button class="popup-trigger" onclick="myFunction()" data-modal="modal-1"> </button> 
<script> 
function myFunction(){ 
//do something here 
} 
</script> 

の様々な数に制限はありません。おかげで

Answer 4

これについて何...

let button = document.querySelectorAll('button.popup-trigger') 
 

 
function myFunction(){ 
 
    alert("Button pressed") 
 
} 
 

 
button.forEach(function(element){ 
 
    if (element.dataset.modal == "modal-1"){ 
 
\t \t \t element.addEventListener("click", myFunction, false); 
 
    } 
 
})

<button class="popup-trigger" data-modal="modal-1">Button 1</button> 
 
<button class="popup-trigger" data-modal="modal-2">Button 2</button> 
 
<button class="popup-trigger" data-modal="modal-3">Button 3</button>