let shtml = ""; data.forEach((d) => { shtml += `<li class="item" data-id="${d.id}">展品:${d.id}</li>`; }); shtml += `<li class="gravity">重力感应</li>`; document.querySelector(".view").innerHTML = shtml; document.querySelector(".gravity").addEventListener("click", () => { if (document.location.protocol === "https:") { vr.gravity.toggle(); } else { alert("需要开启https"); } }); document.querySelectorAll(".item").forEach((target) => { target.addEventListener("click", () => { const id = target.dataset.id; vr.viewItem(id); }); }); 分析这段代码
时间: 2024-04-12 20:33:03 浏览: 27
这段代码是一个用于展示展品列表和处理交互的代码。让我们逐行分析它:
1. 首先,通过一个循环遍历`data`数组中的每个元素,并使用字符串模板(``符号)生成一个`<li>`元素,将其添加到`shtml`字符串中。每个展品列表项都有一个`data-id`属性,其值为展品的ID。
2. 接下来,添加一个具有`gravity`类名的`<li>`元素到`shtml`字符串中。这个列表项表示重力感应选项。
3. 将`shtml`字符串的内容设置为具有`.view`类名的HTML元素的innerHTML,以将展品列表渲染到页面上。
4. 添加一个点击事件监听器到具有`.gravity`类名的HTML元素上。当点击这个元素时,会检查当前页面的协议是否为HTTPS,如果是,则调用`vr.gravity.toggle()`方法,否则弹出一个提示。
5. 遍历所有具有`.item`类名的HTML元素,为每个元素添加点击事件监听器。当点击其中一个展品列表项时,获取其`data-id`属性的值,并调用`vr.viewItem(id)`方法。
这段代码主要实现了以下功能:
- 动态生成展品列表并渲染到页面上;
- 处理重力感应选项的点击事件;
- 处理展品列表项的点击事件,根据点击的展品ID调用相应的方法。
请注意,这段代码中的`vr.gravity.toggle()`和`vr.viewItem(id)`方法是根据您的具体应用进行定义和实现的,上述代码只是一个示例,需要根据您的具体需求进行适当的修改和调整。
相关问题
<body> <ul> </ul> <!-- <script src="axios.js"></script> --> <!-- <script src="axio1.js"></script> --> <script src="ajax.js"></script> <script> // let oUl = document.querySelector("ul"); let data = { current: 1, pagesize: 112, } let oUl = document.querySelector("ul"); ajax({ url: "http://localhost:8888/goods/list", type: "get", data, author: true, //需要认证 success: function (resData) { resData = JSON.parse(resData); let data = resData.list; // console.log(data); let html = ""; data.forEach(v => { // console.log(v) html += `<li> <img src="${v.img_big_logo}"> <p>${v.title}</p> <p>¥${v.price}</p> </li>`; }); oUl.innerHTML = html }, }); </script> </body> 如何把渲染出来的内容换成超链接
可以在生成的 li 标签中包裹一个 a 标签,设置其 href 属性为对应的链接地址。例如,将商品的标题作为链接文字,链接地址为商品详情页面:
```
data.forEach(v => {
html += `<li>
<a href="${v.link}">
<img src="${v.img_big_logo}">
<p>${v.title}</p>
<p>¥${v.price}</p>
</a>
</li>`;
});
```
其中,`v.link` 为商品详情页面的链接地址。生成的 li 标签中包含了一个超链接,显示商品的标题,点击后可以跳转到对应的商品详情页面。
function renderData() { let tbody = document.querySelector('tbody'); tbody.innerHTML = ''; contacts.forEach((contact, index) => { let tr = document.createElement('tr'); tr.innerHTML = ` <td>${contact.name}</td> <td>${contact.phone}</td> <td>${contact.email}</td> <td> <button class="edit-btn" data-index="${index}">编辑</button> <button class="delete-btn" data-index="${index}">删除</button> </td> `; tbody.appendChild(tr); }); }帮我添加一个确认是否删除的提示
好的,可以在删除按钮的点击事件中添加确认提示框。可以按照如下代码进行修改:
```
function renderData() {
let tbody = document.querySelector('tbody');
tbody.innerHTML = '';
contacts.forEach((contact, index) => {
let tr = document.createElement('tr');
tr.innerHTML = `
<td>${contact.name}</td>
<td>${contact.phone}</td>
<td>${contact.email}</td>
<td>
<button class="edit-btn" data-index="${index}">编辑</button>
<button class="delete-btn" data-index="${index}">删除</button>
</td>
`;
tbody.appendChild(tr);
});
// 为删除按钮添加点击事件
let deleteBtns = document.querySelectorAll('.delete-btn');
deleteBtns.forEach((btn) => {
btn.addEventListener('click', (e) => {
let index = e.target.dataset.index;
let contact = contacts[index];
if (confirm(`确定要删除 ${contact.name} 吗?`)) {
contacts.splice(index, 1);
renderData();
}
});
});
}
```
这样,当用户点击删除按钮时,会弹出一个确认提示框,询问用户是否确定删除该联系人。如果用户点击确认按钮,则执行删除操作;否则,不执行任何操作。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
添加
修改
删除
手动运行数据更新器 选中 时间 总居民消费CPI 食品类CPI 衣着类CPI 居住类CPI 服务类CPI 交通通信类CPI 教育类CPI 医药类CPI 其他类CPI <c:forEach items="${cpi}" var="i"> <input name="radiobox" type="radio" value=${i.TIMES}/> <c:if test="${i.TIMES==999999}"> 预测本月 </c:if> <c:if test="${i.TIMES!=999999}"> ${i.TIMES} </c:if> ${i.CPI} ${i.FOOD} ${i.CLOTH} ${i.RESIDE} ${i.SERVICE} ${i.TRANS} ${i.EDU} ${i.MEDIC} ${i.OTHER} </c:forEach> 我希望页面在点击修改和删除的时候把单选框的value提交给服务器,我应该怎么改
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<input type="checkbox" id="selectAll"> 学生编号 学生学号 学生姓名 学生性别 学生出生日期 学生地址 学生电话 学生照片 学生班级 操作 <c:forEach items="${list.list }" var="student" varStatus="status"> <input type="checkbox" name="idCheckbox" value="${student.stuId }"> ${student.stuId } ${student.stuNo} ${student.stuName } ${student.stuSex } ${student.stuBirth } ${student.stuAddress } ${student.stuPhone } ![]()
${student.classes.className } 美化一下
<body> <form action="QueryServlet" method="post"> 请输入用户名:<input type="text" name="userName"/> <input type="submit" value="查询"/> 显示全部 </form> 用户名 密码 积分 注册时间 <c:forEach items="${users }" var="item"> ${item.userName } ${item.password } ${item.integral } ${item.registerTime } 删除 </c:forEach> </body>tomcat 删除一条记录怎么写
如何将这串代码转为json <input type="checkbox" v-model="RemitInBox" class="RemitInBox v-pristine v-valid" name="RemitInBox" value="0" v-checked="data.CheckFlag" v-disabled="data.FndDrc!='01' || data.BusiState!='10'" id="List0_RemitIn" v-click="clickBox($index,data)"> IR00252300338A IR00252300338A 2023-05-23 USD20,693.00 BYGGING INTERCONTINENTAL 12 SHEHAB ... 31980005000107125 入账 退汇 待客户确认 受理成功 打印 <input type="checkbox" v-model="RemitInBox" class="RemitInBox v-pristine v-valid" name="RemitInBox" value="1" v-checked="data.CheckFlag" v-disabled="data.FndDrc!='01' || data.BusiState!='10'" id="List1_RemitIn" v-click="clickBox($index,data)"> IR00252300337A IR00252300337A 2023-05-23 USD23,543.50 DIARITA POLYMERS OFFSHORE LTD UNITE... 31980005000107125 入账 退汇 待客户确认 受理成功 打印
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<body> <form action="QueryServlet" method="post"> 请输入用户名:<input type="text" name="userName"/> <input type="submit" value="查询"/> 显示全部 </form> 用户名 密码 积分 注册时间 <c:forEach items="${users }" var="item"> ${item.userName } ${item.password } ${item.integral } ${item.registerTime } 删除 </c:forEach> </body>tomcat 删除一条记录怎么写
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
如何将这串代码转为json <input type="checkbox" v-model="RemitInBox" class="RemitInBox v-pristine v-valid" name="RemitInBox" value="0" v-checked="data.CheckFlag" v-disabled="data.FndDrc!='01' || data.BusiState!='10'" id="List0_RemitIn" v-click="clickBox($index,data)"> IR00252300338A IR00252300338A 2023-05-23 USD20,693.00 BYGGING INTERCONTINENTAL 12 SHEHAB ... 31980005000107125 入账 退汇 待客户确认 受理成功 打印 <input type="checkbox" v-model="RemitInBox" class="RemitInBox v-pristine v-valid" name="RemitInBox" value="1" v-checked="data.CheckFlag" v-disabled="data.FndDrc!='01' || data.BusiState!='10'" id="List1_RemitIn" v-click="clickBox($index,data)"> IR00252300337A IR00252300337A 2023-05-23 USD23,543.50 DIARITA POLYMERS OFFSHORE LTD UNITE... 31980005000107125 入账 退汇 待客户确认 受理成功 打印
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)