将html内容调用到jQuery变量中

Calling html content into a jQuery variable

本文关键字：jQuery 变量 调用 html      更新时间：2023-09-26

因此，我使用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菜单内容变量中吗？

对于您的示例，请调用下面的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>

或者有更好的方法吗？

您不必使用所有这些内容。此外，您生成了错误的标记。浏览器可能会正确地渲染它，但您会生成以下字符串：

<li title=Page 1>

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

因此，正确的版本应该是：

var 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);

我错了，很抱歉使用下面的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>';

如果可以使用服务器端代码，则可以执行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 }
    });
}

像一样尝试

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>";

我想使用handlebar将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);

太棒了！

相关文章：