JQM-动态地将图像添加到可折叠的标题中
JQM - Add image to collapsible header dynamically
我有一个一周中几天的可折叠集合,其中包含用户的活动,表示为可折叠集合中的列表视图。
<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("刷新")函数,但我不知道那是什么。
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" />');
演示
相关文章:
- 可折叠树在第二级不显示子树
- 引导程序/轨道-可折叠导航栏没有'我不能在手机上工作
- 只使用CSS创建可折叠菜单或spry菜单
- 可以't以编程方式关闭jQuery移动弹出窗口中的可折叠部分
- QML中的可折叠面板
- 可折叠容器/柱.添加多个链接
- 如何将垂直选项卡式内容面板更改为具有媒体查询和 jquery 的响应式可折叠面板
- 如何防止我的引导可折叠框滚动页面
- 如何以可扩展和可折叠的树形结构显示XML模式
- 单击一个后自动折叠所有其他可折叠内容
- 可折叠侧边栏/导航菜单
- 可折叠<UL><李>不起作用
- Ext JS 5.1:当可折叠为true时,无法对面板进行标题设置
- jQuery与可折叠列表冲突
- 如何在jquery移动版的中心制作可折叠项目的标题
- 使用JQM(jQueryMobile),为什么可折叠嵌套另一个可折叠标题会间歇性切换
- 如何隐藏可折叠的标题时,可折叠的内容显示在Jquery移动
- 按id更改可折叠标题内的文本或显示图像
- 将复选框添加到jquery mobile中的可折叠列表标题中
- JQM-动态地将图像添加到可折叠的标题中