Question

我正在从ajax调用Web服务生成列表视图。

这是代码：

var ajax = {  
parseJSONP:function(result){  
    movieInfo.result = result.results;
    $.each(result.results, function(i, row) {

        console.log("Title" + row.title);


        $('#movie-list').append('<li><a href="" data-id="' + row.id + '">`<img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'+row.poster_path+'"/>`<h3>' + row.title + '</h3><p>' + row.vote_average + '/10</p></a></li>');
    });

    $('#movie-list').listview('refresh');
}

};

我需要的是让<img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'+row.poster_path+'"/>填充行元素的背景并将行高增加30％。问题是我无法通过列表视图创建来插入css。

有办法做到这一点吗？我是javascript和jQuery mobile 1.4.3的新手。

最好的问候

Answer 1

我注意到的一些事情：

您正在调用jquery选择器以多次获取具有movie-list id的元素，因为选择器处于循环中。而不是使用jquery一遍又一遍地查找相同的元素，您应该将其设置为变量并重复使用它！
您正在使用字符串连接创建html。虽然这通常适用于少量动态html，但很快就很难维护。我建议创建DOM元素并将它们相互附加（不使用jquery），而不是制作一个巨大的html字符串。
您正在javascript中构建html！如果可能的话，我建议调整你的API以返回你需要的html块并构建它的服务器端而不是构建它的客户端。如果你构建了html服务器端，那么你可以利用你正在使用的任何渲染框架（PHP，Jade，JSF等......）并将html写为html。

考虑到这些因素，设置background-image样式属性应该可以正常工作。您可能还需要使用background-repeat和background-size来获得所需的效果。

这是我想出的：

var ajax = {
    parseJSONP:function(response){
        var results = response.results;
        movieInfo.result = results;

        var $movieList = $("#movie-list");

        for(var i = 0; i < results.length; i++) {
            var row = results[i];

            console.log("Title: " + row.title);

            var listItem = document.createElement("li");
            var anchor = document.createElement("a");
            var header = document.createElement("h3");
            var paragraph = document.createElement("p");

            anchor.setAttribute("href", "");
            anchor.setAttribute("data-id", row.id);

            header.textContent = row.title;
            paragraph.textContent = row.vote_average + "/10";

            var backgroundImageUrl = "http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185" + row.poster_path;
            listItem.style.backgroundImage = "url('" + backgroundImageUrl + "')";
            listItem.style.backgroundRepeat = "no-repeat";
            listItem.style.backgroundSize = "cover";

            anchor.appendChild(header);
            anchor.appendChild(paragraph);
            listItem.appendChild(anchor);

            $movieList.append(listItem);
        }

        $movieList.listview('refresh');

        //increases the height of each list item by thirty percent
        $movieList.find("li").each(function(index, element) {
            var $element = $(element);
            $element.css("height", ($element.offset().height * 1.3) + "px");
        });
    }
};

Answer 2

使用html追加如下：

$('#movie-list').append('<li style="background:url(http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185'+row.poster_path+') no-repeat; height:30%;"><a href="" data-id="' + row.id + '"><h3>' + row.title + '</h3><p>' + row.vote_average + '/10</p></a></li>');

动态样式列表视图

2 个答案: