Question

所以，我正在使用jQuery在各种HTML文档中构建一个通用菜单（page1.html，page2.html，page3.html）。

到目前为止，这是我的代码：

HTML代码段

<body>
    <div class="menu">

    </div>
</body>

JavaScript文件：

var menucontent;

menucontent = "<ul>"+
                "<li title="+"Page 1"+">"+"<a href="+"Page1.html"+">"+"Page 1"+"</a></li>"+
                "<li title="+"Page 2"+">"+"<a href="+"Page2.html"+">"+"Page 2"+"</a></li>"+
                "<li title="+"Page 3"+">"+"<a href="+"Page3.html"+">"+"Page 3"+"</a></li>"+
              "</ul>";

$( ".menu" ).html(

menucontent

);

这一切都很好，但是......继续添加“+”位是很痛苦的。

我想知道的是 - 我可以在下面的代码中使用单独的html文件，可以调用JavaScript menucontent变量吗？

对于您的示例，请拨打以下menu.html ...

<ul>
    <li title="Page 1"><a href=Page1.html>Page 1</a></li>
    <li title="Page 2"><a href=Page2.html>Page 2</a></li>
    <li title="Page 3"><a href=Page3.html>Page 3</a></li>
</ul>

......还是有更好的方法吗？

Answer 1

我错了，抱歉使用下面的sytax

<强>更新

'<ul>'+
    '<li title="Page 1"><a href="Page1.html">Page 1</a></li>'+
    '<li title="Page 2"><a href="Page2.html">Page 2</a></li>'+
    '<li title="Page 3"><a href="Page3.html">Page 3</a></li>'+
'</ul>';

我对多行字符串感到困惑。

'<ul/
>'+
    '<li title="Page 1"><a href="Page1.html">Page 1</a></li>'+
    '<li title="Page 2"><a href="Page2.html">Page 2</a></li>'+
    '<li title="Page 3"><a href="Page3.html">Page 3</a></li>'+
'</ul>';

Answer 2

你不必使用所有这些集中。此外，您生成错误的标记。它可能会由浏览器正确呈现，但您生成此字符串：

EOMONTH()

相反，使用单引号作为字符串分隔符并键入<li title=Page 1>或转义双引号：'<li title="Page 1">' + ...

所以正确的版本如下：

"<li title=\"Page 1\">" + ...

Answer 3

如果您可以使用服务器端代码，则可以执行ajax调用以获取菜单使用.NET aspx WebForm的示例：

<% @ Page Language="C#" %>
<% Response.ContentType = "text/HTML"; %>
<ul>
    <li title="Page 1"><a href=Page1.html>Page 1</a></li>
    <li title="Page 2"><a href=Page2.html>Page 2</a></li>
    <li title="Page 3"><a href=Page3.html>Page 3</a></li>
</ul>

jQuery的：

$(document).ready(function () {
    getMenu();
});

function getMenu() {
    $.ajax({
        type: "GET",
        url: "menu.aspx",
        cache: false,
        crossDomain: false,
        dataType: "html",
        success: function (data) {
            $(".menu").html(data);
        },
        error: function (xhr, aOptions, rError) { // error action }
    });
}

Answer 4

尝试

menucontent = "<ul>"+
                "<li title='Page 1'><a href='Page1.html'>Page 1</a></li>"+
                "<li title='Page 2'><a href='Page2.html'>Page 2</a></li>"+
                "<li title='Page 3'><a href='Page3.html'>Page 3</a></li>"+
              "</ul>";

Answer 5

我想使用把手将html标记分隔为html代码段

<script id="template" type="text/x-handlebars-template">
  <ul>
    <li title="Page 1"><a href="Page1.html">Page 1</a></li>
    <li title="Page 2"><a href="Page2.html">Page 2</a></li>
    <li title="Page 3"><a href="Page3.html">Page 3</a></li>
  </ul>
</script>
var source = $("#template").html();
var template = Handlebars.compile(source);
$( ".menu" ).html(template);

你知道吗，现在你有动态生成模板的能力

<script id="template" type="text/x-handlebars-template">
      <ul>
        {{#each page}}
           <li title="{{title}}"><a href="{{url}}">{{title}}</a></li>
        {{/each}}
      </ul>
</script>
var source = $("#template").html();
var data = [{title: 'page 1', url: 'Page1.html'}, {title: 'page 2', url: 'Page2.html'}];
var template = Handlebars.compile(source, data);
$( ".menu" ).html(template);

真棒！

将html内容调用为jQuery变量

5 个答案: