4. 以下是一段js，实现了点击每一个li弹出每一个li的内容，如何优化这段代码以及给出你的优化意见 ```html <!DOCTYPE html> <html> <head> <title>笔试题</title> </head> <body> <ul id="list"> <li>项目1</li> <li>项目2</li> <li>项目3</li> <li>项目4</li> </ul> <script> var list = document.querySelectorAll('#list>li'); for(let i=0;i<list.length;i++){ list[i].onclick = function(){ alert(this.innerHTML) } } </script> </body> </html> ```

时间: 2024-02-04 10:02:21 浏览: 22

可以使用事件委托来优化代码，将点击事件绑定在ul上，然后通过事件对象的target属性来获取被点击的li元素。这样可以避免给每个li元素都绑定一个点击事件，提高性能和代码可维护性。下面是优化后的代码： ```html <!DOCTYPE html> <html> <head> <title>笔试题</title> </head> <body> <ul id="list"> <li>项目1</li> <li>项目2</li> <li>项目3</li> <li>项目4</li> </ul> <script> var list = document.querySelector('#list'); list.addEventListener('click', function(event) { if (event.target.tagName === 'LI') { alert(event.target.innerHTML); } }); </script> </body> </html> ``` 使用事件委托可以减少代码量，提高性能和可维护性。

鼠标右键点击table中的一条数据，弹出一个菜单选项

您可以使用以下代码实现在鼠标右键点击表格中的一条数据时弹出菜单选项： ```javascript // 获取表格元素 const table = document.querySelector('table'); // 监听鼠标右键点击事件 table.addEventListener('contextmenu', e => { e.preventDefault(); // 阻止默认菜单弹出 // 获取点击的行和列 const row = e.target.parentNode; const column = e.target; // 创建菜单元素 const menu = document.createElement('div'); menu.classList.add('menu'); menu.innerHTML = ` <ul> <li>编辑</li> <li>删除</li> </ul> `; // 设置菜单位置 menu.style.left = e.pageX + 'px'; menu.style.top = e.pageY + 'px'; // 监听菜单选项点击事件 menu.querySelectorAll('li').forEach(item => { item.addEventListener('click', () => { // 根据点击的选项执行相应操作 if (item.innerText === '编辑') { // 编辑操作 } else if (item.innerText === '删除') { // 删除操作 } // 隐藏菜单 menu.remove(); }); }); // 将菜单添加到页面中 document.body.appendChild(menu); }); ``` 这段代码会在表格上监听鼠标右键点击事件，当点击时获取所在行和列，创建菜单元素并设置位置，然后在菜单选项点击时执行相应的操作。

用前端语言写一段实现购物车的代码

好的，以下是一个简单的购物车代码示例，使用了HTML、CSS和JavaScript： HTML代码： ``` <div class="cart"> <h2>购物车</h2> <ul id="cart-list"></ul> <p id="total">总价：0元</p> <button id="checkout">结算</button> </div> <div class="products"> <h2>商品列表</h2> <ul> <li> <span class="name">商品1</span> <span class="price">100元</span> <button class="add-to-cart" data-name="商品1" data-price="100">加入购物车</button> </li> <li> <span class="name">商品2</span> <span class="price">50元</span> <button class="add-to-cart" data-name="商品2" data-price="50">加入购物车</button> </li> <li> <span class="name">商品3</span> <span class="price">200元</span> <button class="add-to-cart" data-name="商品3" data-price="200">加入购物车</button> </li> </ul> </div> ``` CSS代码： ``` .cart { float: left; width: 300px; padding: 20px; border: 1px solid #ccc; } .cart h2 { margin-top: 0; } .cart ul { list-style: none; padding: 0; } .cart li { display: flex; justify-content: space-between; margin-bottom: 10px; } .products { float: left; width: 500px; padding: 20px; border: 1px solid #ccc; } .products h2 { margin-top: 0; } .products ul { list-style: none; padding: 0; } .products li { display: flex; justify-content: space-between; margin-bottom: 10px; } .add-to-cart { background-color: #337ab7; color: #fff; border: none; padding: 5px 10px; cursor: pointer; } .add-to-cart:hover { background-color: #23527c; } ``` JavaScript代码： ``` // 获取DOM元素 const cartList = document.getElementById('cart-list'); const total = document.getElementById('total'); const checkoutBtn = document.getElementById('checkout'); const addToCartBtns = document.getElementsByClassName('add-to-cart'); // 初始化购物车数据 let cartData = []; // 加入购物车事件监听 for (let i = 0; i < addToCartBtns.length; i++) { addToCartBtns[i].addEventListener('click', function() { const name = this.getAttribute('data-name'); const price = Number(this.getAttribute('data-price')); const item = { name, price }; cartData.push(item); renderCart(); }); } // 渲染购物车 function renderCart() { let html = ''; let totalPrice = 0; for (let i = 0; i < cartData.length; i++) { html += `<li>${cartData[i].name} - ${cartData[i].price}元</li>`; totalPrice += cartData[i].price; } cartList.innerHTML = html; total.innerHTML = `总价：${totalPrice}元`; } // 结算事件监听 checkoutBtn.addEventListener('click', function() { alert(`总价：${total.innerText}`); cartData = []; renderCart(); }); ``` 这段代码实现了一个简单的购物车功能，包括商品列表、加入购物车和结算等功能。当用户点击“加入购物车”按钮时，将商品信息添加到购物车数据中并渲染到页面上；当用户点击“结算”按钮时，弹出总价并清空购物车数据。

鼠标右键点击table中的一条数据，弹出一个菜单选项

用前端语言写一段实现购物车的代码

相关推荐

js实现点击每个li节点，都弹出其文本值及修改

JavaScript给每一个li节点绑定点击事件的实现方法

JS实现点击li标签弹出对应的索引功能【案例】

生成一个to do list 的js代码

设计一个快捷菜单，添加点击事件，同时获取选中的列表项内容

利用web前端编写一段网吧管理系统商品购物车的代码

站点三个文件夹包含三个网页文件，一个img文件，一个css文件，一个JS文件

生成一个增删查改的js

可以帮我做一个有js的常规的网页布局吗

用JS和h5写一个猜数字游戏及历史记录

跟随鼠标弹出的提示框的js代码

上一页 1 2 3 下一页 点击上一页获取li中带有bluebg属性名的文本，用jquery来写，怎么做

最新推荐

node-v12.22.1-linux-x64.tar.xz

基于微信小程序的校园综合服务小程序

node-v7.8.0-linux-armv7l.tar.gz

毕业设计：Python招聘分析系统论文（源码 + 数据库 + 说明文档）

win11修复-网络正常-永远是地球小图标的bug

RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz

管理建模和仿真的文件

：YOLOv1目标检测算法：实时目标检测的先驱，开启计算机视觉新篇章

设计算法实现将单链表中数据逆置后输出。用C语言代码

c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf

上一页 1 2 3 下一页点击上一页获取li中带有bluebg属性名的文本，用jquery来写，怎么做