2

我正在构建的网页上使用动态加载的 HTML 内容。我想要的是有一个带有片段的 HTML 文件列表，这些片段将使用 javascript/jquery 和 ajax 请求动态导入我的网页。这将允许我将多个博客文章存储为单独的文件，并动态构建一个包含多个文章的页面。

下面是一个示例片段，只有一个标题和一个小表格：

CSS：

#swimTimes2{
    background-color: #eee;
}

HTML 源：

<div id="itemContainer">
    <div id='swimTimes2' class='item'>
        <h1> Swim Times </h1>
        <table>
            <tr class="tableHead">
                <td>Weekdays</td><td>Weekends</td><td>Holidays</td></tr>
            <tr>
                <td>7:00am-9:00am</td><td>10:30am-8:00pm</td><td>11:00am-4:00pm</td></tr>
            <tr>
                <td>11:00am-2:00pm</td></tr>
            <tr>
                <td>4:00pm-10:30pm</td></tr>

        </table>

    </div>
</div>

我发现通过使用$.get()我可以加载上面的片段文件的内容，然后使用 jquery 搜索我想要的 html 片段，在这种情况下是#itemContainer 的内容。

JAVASCRIPT

$(document).ready( function(){
    loadContent('content/content_1.html');
});


function loadContent(fileName){

    $.get(fileName, function(data){

        var htmlContents = $(data).find("#itemContainer").children('.item').html();
        var id = $(data).find("#itemContainer").children('.item').attr('id');
        $('#content').append($('<div class="item" />').attr('id', id).html(htmlContents));

        var styleEl = $(data).find("style");
        $('head').append(styleEl);

    });
}

所以我的处理函数的前 3 行$.get()工作 - 我能够导入片段并将其放在我的 html 页面上。现在，我还想将片段中的 css 样式导入到我的主页中——在这个例子中，我给我的项目一个灰色背景，这是一个它不会从我的主 html 页面获得的属性。

我遇到的问题是，虽然我知道我的代码片段中的样式元素被导入到我的主页中，但它包含的 css 规则不适用于导入的 html。我错过了什么？

4

1 回答 1

1

您可以在jQuery API上执行与第二个示例类似的操作

var styleProps = $(this).css( ["width", "height", "color", "background-color"] );
$.each( styleProps, function( prop, value ) {
  html.push( prop + ": " + value );
});

$( "#result" ).html( html.join( "<br>" ) );

唯一不利的是，您必须列出.css您想要的属性。但是，如果您放置所有可能的属性，它可能仍然有效，因为没有什么是真正null的，除非该值被指定为''

于 2013-06-28T12:33:46.110 回答