如何使用 jQuery 导入 onClick in 元素

Question

我想在jquery上添加一个onclickin和一个按钮标签

<button type="button" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0"></button>
<img id="loadingImage" src="preoader.gif" style="visibility:hidden">

我需要这个脚本

<script type="text/javascript">
function openImage(){
if ( document.getElementById('loadingImage').style.visibility == 'visible' ) 
{
document.getElementById('loadingImage').style.visibility='hidden';
} else {
document.getElementById('loadingImage').style.visibility='visible';
}}
</script>

Answer 1

您可以添加如下事件：

$('#buttonid').on("click", function(){
//do something here like calling openImage();
});

你只需要给你的按钮一个唯一的ID，如下所示：

<button type="button" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0" id="buttonid"></button>

编辑： 如果您无法编辑按钮标签，则可能需要其他选择器。 您可以尝试获取父属性来获取正确的子属性，如下所示：

$('.parentclass button').on("click", function(){
//do something here like calling openImage();
});

或类似的东西

$('.parentclass div button').on("click", function(){
//do something here like calling openImage();
});

编辑解决方案：

$(".mejs-play button").on("click", function(){
openImage();
});

Answer 2

您可以使用此代码:)

$(document).ready(function(){
$("#btn").on("click", function(){
var img = $("#loadingImage");
if(img.is(":visible")) {
img.css({"display" : "none"})
} else {
img.css({"display" : "block"})
}
})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="btn">Click Here</button>
<img id="loadingImage" src="https://b-digital.info/wp-content/uploads/2018/09/preoader.gif">

Answer 3

如果你不能更改 html 代码，你可以尝试对 jQuery 的选择部分使用一些属性值，如下例所示：

$("button[title='Play']").click(function()
{
// Just for debugging on the console.
console.log("Click detected on PLAY button");
// Call the openImage() method.
openImage();
});

Answer 4

你的错误是试图将本机js与JQuery混合在一起。 当你选择一个项目时，比如说let item = document.getWhatever那么你不能 在此item上使用 Jquery 函数，因此您必须从一开始就使用 JQuery 的方法let item = $(#myItem)选择它。 之后，您可以使用 Jquery 函数来添加 onclick 事件。

通过像这样设置 onclick as 属性：

item.attr('onclick', 'doStuff()');

或者像这样使用.click()：

item.click(function() {
doStuff
});

Answer 5

根据您的示例，您可以添加：

onClick="openImage();"

按钮上的事件处理程序：

<button type="button" onClick="openImage();" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0"></button>

在代码笔上尝试一下。