动态样式列表视图

Question

我正在从对web服务的ajax调用中生成一个列表视图。

这是代码：

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 Mobile1.4.3的新手。

诚挚的问候

Answer 1

我注意到几件事：

• 您正在多次调用jquery选择器，以获得具有电影列表id的元素，因为选择器处于循环中。与其使用jquery一次又一次地查找相同的元素，不如将其设置为变量并重用它！
• 您正在使用字符串连接创建html。虽然这对于少量的动态html通常是很好的，但是它很快就会变得很难维护。我建议创建DOM元素并将它们相互附加(不使用jquery)，而不是创建一个巨大的html字符串。
• 你在用javascript构建html！如果可能的话，我建议调整API以返回所需的html块，并构建服务器端，而不是构建客户端。如果您构建html服务器端，那么您可以利用您正在使用的任何呈现框架(PHP、Jade、JSF等)。并将html编写为html。

考虑到这些因素，设置背景图像样式属性应该会很好。您还可能需要使用背景-重复和背景大小，以获得预期的效果。

我想出的是：

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