使用JavaScript和jQuery生成HTML-JavaScript無法執行？

Question

在這篇文章之后，我使用jQuery重新創建了代碼。 jsFiddle說，應該找到所有內容，我也找不到任何錯誤。 這是代碼：

function generatePost(title, time, text) {
var postCount = 0;

$('#postcontainer').append('<div></div>').attr('post_' + postCount).attr('class', 'content');
$('#post_' + postCount).append('<h3>' + title + '</h3>').attr('id', 'post_h3_' + postCount);
$('#post_h3_' + postCount).append('<span>' + time + '</span>');

var paragraphs = text.split("||");

for (var i = 0; i < paragraphs.length; i++) {
    var paragraphCount = 0;
    $('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>').attr('id', 'post_p_' + postCount + '_' + paragraphCount);
    paragraphCount++;
}

postCount++;
}

現在的問題可能是JavaScript甚至沒有執行，我的HTML看起來像這樣：

<head>
    <?php include 'components/_head.php';?>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/postGen.js"></script>
    <script type="application/javascript" src="postGen.js">
        document.addEventListener('DOMContentLoaded', function() {
            generatePost("Testing Title", "I don't know", "This is || a paragraph");
        }
    </script>
</head>
<body>
    <header>
        <?php include 'components/header.php';?>
    </header>

    <main>
        <?php include 'components/main.php';?>
        <div class="fullscreencontainer">
            <img class="background" src="img/background.jpg">
            <div class="title">
                <h2>Der Bürger als Edelmann</h2>
                <h4>von Moliére</h4>
            </div>
        </div>
        <div class="container">
            <div id="postcontainer">
                /* ? */
            </div>
            <div class="sidebar">

            </div>
        </div>
    </main>
    <footer>
        <?php include 'components/footer.php';?>
    </footer>
</body>

文件的結構：

index.php
js / jquery-1.11.3.min.js
js / jquery-migrate-1.2.1.min.js
js / postGen.js 此文件包含在第一個代碼框中編寫的代碼

檢查器顯示沒有新內容。
控制台顯示：

語法錯誤：參數列表后缺少）

編輯：最終代碼：

  <script type="application/javascript"> $(document).ready(function() { function generatePost(title, time, text) { var postCount = 0; $('#postcontainer').append('<div id=' + "post_" + postCount + '></div>') $('#post_' + postCount).attr('class', 'content'); $('#post_' + postCount).append('<h3>' + title + '<span>' + time + '</span></h3>'); var paragraphs = text.split("||"); for (var i = 0; i < paragraphs.length; i++) { $('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>'); } postCount++; } generatePost("Testing Title", "I don't know", "This is || a paragraph"); generatePost("Testing Title", "I don't know", "This is || a paragraph"); generatePost("Testing Title", "I don't know", "This is || a paragraph"); generatePost("Testing Title", "I don't know", "This is || a paragraph"); }); </script>

Answer 1

似乎您太早調用了generatePost（）函數（在加載文檔時，但是同時，這也就是在加載jQuery時的原因。。。為什么會出現“）” Missing error ..）。

因此，我將HTML更改為：

<head>
</head>
<body>
    <main>
        <div class="container">
            <div id="postcontainer">

            </div>
        </div>
    </main>
</body>

而jQuery可以：

$(document).ready(function() {
        function generatePost(title, time, text) {
        var postCount = 0;
        $('#postcontainer').append('<div id=' + "post_" + postCount +  '></div>').attr('class', 'content');
        $('#post_' + postCount).append('<h3>' + title + '</h3>').attr('id', 'post_h3_' + postCount);
        $('#post_h3_' + postCount).append('<span>' + time + '</span>');
        var paragraphs = text.split("||");

        for (var i = 0; i < paragraphs.length; i++) {
            var paragraphCount = 0;
            $('#post_' + postCount).append('<p>' + paragraphs[i] + '</p>').attr('id', 'post_p_' + postCount + '_' + paragraphCount);
            paragraphCount++;
        }
        postCount++;
    }  
         generatePost("Testing Title", "I don't know", "This is || a paragraph"); 
});

只需在文檔末尾調用該函數即可。 另外，正如您所看到的，我還遇到了一些有關如何分配帖子ID的問題，因此最終也切換了該ID，並使用一些簡單的字符串插值對其進行了分配。

干杯，

PG

使用JavaScript和jQuery生成HTML-JavaScript無法執行？

問題描述

1 個解決方案

解決方案1
0 已采納 2015-11-19 22:46:43

使用JavaScript和jQuery生成HTML-JavaScript無法執行？

問題描述

1 個解決方案

解決方案1 0 已采納 2015-11-19 22:46:43

解決方案1
0 已采納 2015-11-19 22:46:43