Question

我的HTML文档上有一个按钮，如下所示

<input type = "submit" value = "Manuals and Coaching Tools" class = "col-sm-1" style="white-space:normal;" id = "mac">

我在文档的底部有这个jQuery块。当点击按钮时，它应该以id“gold”淡入div。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">
$(document).ready(function () {
  $('#mac').click(function(){    
    $('#gold').fadeIn('slow');
  });
});
</script>

然而，代码似乎无法工作/触发，也没有任何反应。任何有关为何发生这种情况的建议都非常感谢。

注意：显示：无应用于css中的“gold”div，但我希望div在点击按钮后淡入。

Answer 1

拆分脚本标签：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
  $('#mac').click(function(){    
    $('#gold').fadeOut('slow');
  });
});
</script>

修改：JSFiddle

Answer 2

以下是工作示例：

$(document).ready(function () {
  $("#mac").click("input", function(){    
    $('#gold').fadeOut('slow');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "submit"   id = "mac"value = "Manuals and Coaching Tools" class = "col-sm-1" style="white-space:normal;">

<div id="gold">Some content</div>

Answer 3

像这样更改您的JavaScript。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $('#mac').click(function(){   
    $('#gold').fadeOut('slow');
  });
});


</script>

Answer 4

如果你的div＃gold是display：none; 你需要将你的jQuqery更新为fadeIn（＆＃34; slow＆＃34;）

 $('#mac').click(function(){  
 $('#gold').fadeIn('slow');
 })

Answer 5

试试这个

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <input type = "submit" value = "button" class = "col-sm-1" style="white-  space:normal;" id = "mac">
    <div id="gold" style="display:none">
    hello
    </div>
    <script>
            $(document).ready(function () {
                $('#mac').click(function(){ 
                   $('#gold').fadeIn('slow')
            });
    });
    </script>

JavaScript不能用于我的html文档

5 个答案: