Question

这是我的button代码：

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

如何使用数据模式popup-trigger触发按钮点击甚至触发课程modal-1？

想在纯javascript中知道，如果你不能这样做，那么jquery。感谢

Answer 1

找到你的DOM元素，然后调用click方法：

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

Answer 2

可以有多种方式

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

其次使用jQuery

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

Answer 3

纯JavaScript：

// 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 4

这个怎么样......

＆＃13;

let button = document.querySelectorAll('button.popup-trigger')

function myFunction(){
    alert("Button pressed")
}

button.forEach(function(element){
    if (element.dataset.modal == "modal-1"){
			element.addEventListener("click", myFunction, false);
    }
})

＆＃13;

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

＆＃13;

触发按钮点击javascript？

4 个答案: