用于简单 onClick 的 jQuery 代码不起作用，我错过了什么？答案

【问题标题】：jQuery code for simple onClick not working, what am I missing?用于简单 onClick 的 jQuery 代码不起作用，我错过了什么？
【发布时间】：2023-03-28 00:55:01
【问题描述】：

我对 jQuery 还很陌生，但我认为这很简单，可以添加一个 onClick 函数。

但由于某种原因，它不起作用。我在想这是我忽略的一点点。另外，我希望div-1 慢慢淡入，这样它就不会立即出现。但由于某种原因，我什至无法让节目正常工作。

这是我的html：

    <button id="button-1" style="height: 50px; 
width: 50px; background: red;">Click Me!</button>

    <div id="div-1" style="height: 400px; 
 width: 400px; background: blue; visibility: hidden;"></div>

和 jQuery

jQuery('#button-1').onClick(){
    jQuery('#div-1').show();
}

这是一个小提琴 http://jsfiddle.net/2wsHd/

【问题讨论】：

jQuery('#button-1').on("click", function() { ... }

标签： jquery html event-handling

【解决方案1】：

绑定点击事件的语法有误，请使用display:none 而不是visibility:hidden。由于显示和隐藏功能使用显示属性而不是可见性属性。

Live Demo

jQuery('#button-1').click(function(){
    jQuery('#div-1').show();
});

如果你想使用可见性属性，那么不要使用显示和隐藏而是设置属性。

Live Demo

jQuery('#button-1').click(function(){
    document.getElementById('div-1').style.visibility = 'visible';
});

您可以根据需要在这两者之间进行选择。这个post 将帮助您决定选择哪一个。

visibility 属性只告诉浏览器是否显示元素与否。它要么是可见的（你可以看到它），要么是不可见的（隐藏 - 你看不到它）。

display 属性告诉浏览器如何绘制和显示元素，如果有的话 - 是否应该显示为内联元素（即它与文本和其他内联元素一起流动）或块级元素（即它具有您所需要的高度和宽度属性）可以设置，它是可浮动的等），以及其他一些（表格，表格行，表格单元格、flex 等），reference.

【讨论】：

【解决方案2】：

试试这样的，FIDDLE

HTML

<div id="div-1" style="height: 400px; width: 400px; background: blue; display:none;"></div>

javascript

$(function(){
    jQuery('#button-1').click(function () {
        jQuery('#div-1').fadeIn("slow")
    })
})

【讨论】：

【解决方案3】：

删除 div id div-1 的 visibility: hidden; 并设置 display:none

http://jsfiddle.net/2wsHd/3/

$('#button-1').on('click',function(){
    $('#div-1').show();
});

【讨论】：

【解决方案4】：

使用 display:none;

<button id="button-1" style="height: 50px; width: 50px; background: red;">Click Me!</button>
<div id="div-1" style="height: 400px; width: 400px; background: blue; display: none;"></div>

和你的 JQuery 到：

$(function() { //on document ready
    $( "#button-1" ).click(function() { //when #button-1 is clicked
        $('#div-1').show(); //show #div-1
    }); //end of click
}); //end of document ready

为了让它淡入，改变

$('#div-1').show();

到

$('#div-1').fadeIn(1000);

http://jsfiddle.net/2wsHd/13/

【讨论】：

【解决方案5】：

jquery 函数使用 click() 而不是 OnClick()。

使用 display: none 代替 visibility: hidden

试试这个：http://jsfiddle.net/2wsHd/14/ http://jsfiddle.net/2wsHd/15/

$('#button-1').click(function(){
    $('#div-1').fadeIn('slow');
})

或者需要显示和隐藏，使用切换

$('#button-1').click(function(){
    $('#div-1').toggle('slow');
})

【讨论】：

【解决方案6】：

使用这个：

jQuery('#button-1').click(function(){
    jQuery('#div-1').show();
});

处理淡入。使用这个：

jQuery('#button-1').click(function(){
    jQuery('#div-1').fadeIn(1000);
});

【讨论】：

你检查过 html 吗？另一个问题是“可见性：隐藏；”的 div 需要替换为 display:none;