JQM-动态地将图像添加到可折叠的标题中

JQM - Add image to collapsible header dynamically

本文关键字:可折叠 标题 添加 动态 图像 JQM-      更新时间:2023-09-26

我有一个一周中几天的可折叠集合,其中包含用户的活动,表示为可折叠集合中的列表视图。

<div data-role="collapsible-set" id="calCol" data-collapsed-icon="arrow-d" data-collapsed="true" data-iconpos="right">
                <div data-role="collapsible">
                    <h1 id="day1Header">Sunday<img src="#" /></h1>
                    <ul id="day1" data-role="listview">
                    </ul>
                </div>
                <div data-role="collapsible">
                    <h1>Monday</h1>
                    <ul id="day2" data-role="listview">
                    </ul>
                </div>
...

我从数据库中获取用户活动的所有内容,因此我动态插入所有内容,如下所示:

var userActivitiesObj = JSON.parse(data.d);
        for (var i = 0; i < userActivitiesObj.length; i++) {
            for (var j = 0; j < userActivitiesObj[i].time.length; j++) {
                var listItem = "<li style='background-color: " + userActivitiesObj[i].hobColor + ";'>";
                listItem += userActivitiesObj[i].actName + " - " + userActivitiesObj[i].actAddress + " - ";
                listItem += userActivitiesObj[i].time[j].startTime + "-" + userActivitiesObj[i].time[j].endTime;
                listItem += " (" + userActivitiesObj[i].time[j].audiance + ")</li>";                    
                $("#day" + userActivitiesObj[i].time[j].day).append(listItem);
                $("#day" + userActivitiesObj[i].time[j].day).listview("refresh");                
            }
        }

我要做的最后一件事是将每个活动的图像添加到当天的标题中。当我尝试在html中做这件事时,它完美地工作了:

<h1 id="day1Header">Sunday<img src="#" /></h1>

但是当尝试动态地执行时,它不会正确工作。这就是我试图做的:

$("#day1Header").html($("#day1Header").html()+"<img src='#'");

和:

$("#day1Header").append("<img src='#'");

我知道我在这里缺少了.list("刷新")函数,但我不知道那是什么。

jQuery Mobile在标题中添加了一个类为ui-collapsible-heading-toggle的锚标记,并将可折叠的标题放置在那里。因此,您可以删除以前的图像,并像这样附加新图像:
$("#day1Header .ui-collapsible-heading-toggle img").remove();
$("#day1Header .ui-collapsible-heading-toggle").append('<img src="https://placeimg.com/44/22/tech" />');

演示