Question

我在我正在构建的网页上玩动态加载的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);

    });
}

所以$.get()处理程序函数的前三行有效 - 我可以导入代码片段并将其放在我的html页面上。现在我想将片段中的css样式导入到我的主页面中 - 在这个例子中，我给了我的项目一个灰色背景，这是一个它不能从我的主html页面获得的属性。

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

Answer 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

，否则没有任何内容真正''

从HTML代码段导入CSS样式

1 个答案: