如何將JavaScript添加到HTML頁面？

Question

我是網絡開發的新手，我想在我的簡單html頁面中添加以下功能，但如果我按下“click me”就不會發生任何事情。 描述部分不隱藏和顯示

我添加了以下代碼。 CSS工作得很好。 但JavaScript不起作用。 我該如何解決這個問題

<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="hpcss.css">
<script>
// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();

// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});
</script>


</head>
<body align="center">
<a href="#" class="clickme">Click Me</a>
<div class="box">
    First Description
</div>

<a href="#" class="clickme">Click Me</a>
<div class="box">
    Second Description
</div>


</body>

</html>

Answer 1

您需要導入jQuery，並且只在jQuery加載后運行代碼

HTML ：

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

JS ：

$(function() {
    // your code here
})

這個小提琴正在運行，因為jsfiddle自動在DOM加載上運行，並為您插入jQuery 。

這里是來自jsfiddle （幕后）的實際來源：

<script type='text/javascript'>//<![CDATA[ 
$(function(){
// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();

// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});

});//]]>  

</script>

Answer 2

你應該做那樣的事情：

$(document).ready(function() {
  // add your code here
})

你在完成加載html之前運行javascript - >錯誤

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

在你的腳本之前嵌入這個。

Answer 4

嘗試將你的js代碼包裝進去

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(function() {
        // your code will be here       
    });
</script>

這意味着您的代碼將在加載頁面元素后執行。 另外我添加了jquery包括。

Answer 5

您在創建DOM之前附加事件。 當你打電話的時候

// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});

尚未創建具有clickme類的元素。

您可以通過將腳本標記放在</body>標記之前修復它，但是將javascript包裝在一個自執行函數中，如下所示：

$(function()
{
    // Hide all the elements in the DOM that have a class of "box"
    $('.box').hide();

    // Make sure all the elements with a class of "clickme" are visible and bound
    // with a click event to toggle the "box" state
    $('.clickme').each(function() {
        $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
            e.preventDefault();

            // Find the next "box" element in the DOM
            $(this).next('.box').slideToggle('fast');
        });
    });
});

此外，您不包括jQuery庫。

始終檢查控制台是否有錯誤。

如何將JavaScript添加到HTML頁面？

問題描述

5 個解決方案

解決方案1
5 2015-02-03 06:51:45

解決方案2
2 已采納 2015-02-03 06:53:16

解決方案3
2 2015-02-03 06:53:29

解決方案4
1 2015-02-03 06:53:02

解決方案5
0 2015-02-03 06:55:42

如何將JavaScript添加到HTML頁面？

問題描述

5 個解決方案

解決方案1 5 2015-02-03 06:51:45

解決方案2 2 已采納 2015-02-03 06:53:16

解決方案3 2 2015-02-03 06:53:29

解決方案4 1 2015-02-03 06:53:02

解決方案5 0 2015-02-03 06:55:42

解決方案1
5 2015-02-03 06:51:45

解決方案2
2 已采納 2015-02-03 06:53:16

解決方案3
2 2015-02-03 06:53:29

解決方案4
1 2015-02-03 06:53:02

解決方案5
0 2015-02-03 06:55:42