Question

我需要从脚本文件中输入一个菜单，以便我只需要在一个地方进行更改以反映整个项目。

$(document).ready(function() 
{
    var str = "<h3>Menu</h3><ul class='nav vertical-nav'>";
    str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=1' ></i>Chair</a></li>");
    str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=3' ></i>Secretary</a></li>");
    str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=2' ></i>Treasurer</a></li>");
    str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=4' ></i>Admin</a></li>");
    str.append("</ul>");

    $('#insert-menu').html(str);

});

现在上面的例子纯粹附加了字符串，但是不起作用。我是jquery的新手，所以我正在学习DOM来实现这个目标。

现在我可以找到有关插入html文件的文档，但不是很多关于如何直接添加代码的文档。

当我单独执行<h3>标记时，它可以工作，但是当我开始添加属性（我认为）时，这就是问题所在。

我在这里走在正确的轨道上吗？

Answer 1

要使用.append，您需要一个jQuery对象。

var str = "<h3>Menu</h3><ul class='nav vertical-nav'>";是一个字符串。

改为使用var str = $("<h3>Menu</h3><ul class='nav vertical-nav'>");。

Answer 2

使用DOM元素执行此操作的另一种方法

var menu = $("<ul>");
var item1 = $("<li>").append($("<a>").prop("href","?p=1")).text("Item 1"); 
var item2 = $("<li>").append($("<a>").prop("href","?p=2")).text("Item 2"); //..so on
//..so on
menu.append(item1).append(item2);
$('#insert-menu').append(menu);
//..so on

可以避免一个人的HTML错误。

Answer 3

使用此

$(document).ready(function() 
{
    var str = "<h3>Menu</h3><ul class='nav vertical-nav'>";
    str+="<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=1' ></i>Chair</a></li>";
    str+="<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=3' ></i>Secretary</a></li>";
    str+="<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=2' ></i>Treasurer</a></li>";
    str+="<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=4' ></i>Admin</a></li>";
    str+="</ul>";

    $('#insert-menu').html(str);

});

或

$(document).ready(function() 
{
    var str = $("<h3>Menu</h3><ul class='nav vertical-nav'>");
    str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=1' ></i>Chair</a></li>");
     str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=3' ></i>Secretary</a></li>");
     str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=2' ></i>Treasurer</a></li>");
     str.append("<li><a href='staff_home.php?var01=<?php echo $userVar; ?>&var02=4' ></i>Admin</a></li>");
     str.append("</ul>");

    $('#insert-menu').html(str);

});

如何从HTML中的jQuery脚本文件添加菜单

3 个答案: