Question

我对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/

Answer 1

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

<强> Live Demo

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

如果要使用visibility属性，请不要使用show和hide而不是set property。

<强> Live Demo

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

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

visibility属性仅告知浏览器是否显示   要素与否。它既可见（你可以看到），也可以看不见   （隐藏 - 你看不到它。）

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

Answer 2

移除div visibility: hidden;的{{1}}并设置div-1

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

display:none

Answer 3

尝试类似这样的内容， 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")
    })
})

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

Answer 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');
})

Answer 6

使用此：

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

处理淡入。使用此：

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

简单onClick的jQuery代码无法正常工作，我缺少什么？

6 个答案: