for (var i = 0; i < span.length; i++) { span[i].onclick = function () { // console.log(this) // ul.removeChild(li) this.parentNode.remove() } }
时间: 2023-12-06 16:40:34 浏览: 85
这段代码的作用是为一个含有多个 span 标签的元素集合绑定一个点击事件,当用户点击其中任意一个 span 标签时,可以删除其所在的父元素。具体实现是通过循环遍历每一个 span 标签,为其绑定一个 onclick 事件,并在事件处理函数中使用 parentNode 属性找到其父元素,然后调用 remove() 方法将其从文档中删除。
相关问题
var total=0.0; //加 //获取所有+按钮 var increment = document.getElementsByClassName("increase"); for (var i = 0; i < increment.length; i++) { //为a标签添加index属性,用于记录下标 increment[i].index = i; //点击+数量增加的功能函数 increment[i].onclick = function () { var flag = this.index; //获取当前按钮对应的数量框 var q = document.getElementsByClassName("quantity")[flag]; var newvalue = parseInt(q.value) + 1; q.setAttribute('value', newvalue); } } //减 //获取所有-按钮 var decrement=document.getElementsByClassName('decrease'); //点击-数量减少的功能函数 for(var j=0;j<decrement.length;j++) { decrement[j].index=j; decrement[j].onclick=function() { var flag=this.index; //获取当前a标签对应的那个数量框 var q=document.getElementsByClassName("quantity")[flag]; if(parseInt(q.value)>1) { var newvalue=parseInt(q.value)-1; q.setAttribute('value',newvalue); } } }能否根据这个加减写一个小计代码
可以,根据上述加减代码,可以在数量框的HTML代码中添加一个小计标签,然后在加减按钮的点击函数中,根据当前数量框的值和商品单价计算小计,并将小计的值设置为小计标签的文本内容。以下是示例代码:
HTML代码:
```html
<div class="item">
<span class="name">商品名称</span>
<span class="price">商品单价</span>
<div class="quantity-wrapper">
<a href="#" class="decrease">-</a>
<input type="text" class="quantity" value="1">
<a href="#" class="increase">+</a>
</div>
<span class="subtotal">小计</span>
</div>
```
JavaScript代码:
```javascript
var increment = document.getElementsByClassName("increase");
var decrement = document.getElementsByClassName("decrease");
var quantity = document.getElementsByClassName("quantity");
var price = document.getElementsByClassName("price");
var subtotal = document.getElementsByClassName("subtotal");
for (var i = 0; i < increment.length; i++) {
increment[i].index = i;
increment[i].onclick = function() {
var flag = this.index;
var q = quantity[flag];
var p = price[flag].textContent;
var s = subtotal[flag];
var newvalue = parseInt(q.value) + 1;
q.setAttribute("value", newvalue);
s.textContent = (newvalue * parseFloat(p)).toFixed(2);
calculateTotal();
};
}
for (var j = 0; j < decrement.length; j++) {
decrement[j].index = j;
decrement[j].onclick = function() {
var flag = this.index;
var q = quantity[flag];
var p = price[flag].textContent;
var s = subtotal[flag];
if (parseInt(q.value) > 1) {
var newvalue = parseInt(q.value) - 1;
q.setAttribute("value", newvalue);
s.textContent = (newvalue * parseFloat(p)).toFixed(2);
calculateTotal();
}
};
}
function calculateTotal() {
var total = 0.0;
for (var k = 0; k < subtotal.length; k++) {
total += parseFloat(subtotal[k].textContent);
}
document.getElementById("total").textContent = total.toFixed(2);
}
```
这段代码实现了商品数量的加减以及每个商品的小计计算,同时还有一个总计的计算函数。注意,需要将每个商品的单价在HTML代码中设置为一个文本节点,例如`<span class="price">10.00</span>`,这样在JavaScript代码中才能通过`textContent`属性获取到它的值。小计和总计需要在计算时进行四舍五入,保留两位小数,可以使用`toFixed`方法实现。
<div class="tools"> <ul class="toolbar"> <li><a href="/UltraCPI/add"><span><img src="images/t01.png" /></span>添加</a></li> <li><a href=""><span><img src="images/t02.png" /></span>修改</a></li> <li><a href=""><span><img src="images/t03.png" /></span>删除</a></li> <li><a href=""><span><img src="images/t05.png"/></span>手动运行数据更新器</a></li> </ul> </div> <table class="imgtable"> <thead> <tr> <th>选中</th> <th>时间</th> <th>总居民消费CPI</th> <th>食品类CPI</th> <th>衣着类CPI</th> <th>居住类CPI</th> <th>服务类CPI</th> <th>交通通信类CPI</th> <th>教育类CPI</th> <th>医药类CPI</th> <th>其他类CPI</th> </tr> </thead> <tbody> <c:forEach items="${cpi}" var="i"> <tr> <td><input name="radiobox" type="radio" value=${i.TIMES}/></td> <c:if test="${i.TIMES==999999}"> <td>预测本月</td> </c:if> <c:if test="${i.TIMES!=999999}"> <td>${i.TIMES}</td> </c:if> <td>${i.CPI}</td> <td>${i.FOOD}</td> <td>${i.CLOTH}</td> <td>${i.RESIDE}</td> <td>${i.SERVICE}</td> <td>${i.TRANS}</td> <td>${i.EDU}</td> <td>${i.MEDIC}</td> <td>${i.OTHER}</td> </tr> </c:forEach> </tbody> </table>我希望页面在点击修改和删除的时候把单选框的value提交给服务器,我应该怎么改
你需要给修改和删除的链接添加一个JavaScript函数,用来获取选中的单选框的value,并将其作为参数提交给服务器。具体的修改如下:
```
<div class="tools">
<ul class="toolbar">
<li><a href="/UltraCPI/add"><span><img src="images/t01.png" /></span>添加</a></li>
<li><a href="#" onclick="editData()"><span><img src="images/t02.png" /></span>修改</a></li>
<li><a href="#" onclick="deleteData()"><span><img src="images/t03.png" /></span>删除</a></li>
<li><a href=""><span><img src="images/t05.png"/></span>手动运行数据更新器</a></li>
</ul>
</div>
<script>
function editData() {
var radioButtons = document.getElementsByName("radiobox");
var selectedValue = "";
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
selectedValue = radioButtons[i].value;
break;
}
}
if (selectedValue != "") {
window.location.href = "/UltraCPI/edit?times=" + selectedValue;
} else {
alert("请选择一条记录进行修改!");
}
}
function deleteData() {
var radioButtons = document.getElementsByName("radiobox");
var selectedValue = "";
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
selectedValue = radioButtons[i].value;
break;
}
}
if (selectedValue != "") {
window.location.href = "/UltraCPI/delete?times=" + selectedValue;
} else {
alert("请选择一条记录进行删除!");
}
}
</script>
```
在这段代码中,我们分别为修改和删除链接添加了`onclick`事件,并分别调用了`editData()`和`deleteData()`函数。这两个函数的作用是获取选中的单选框的value,并将其作为参数提交给服务器。如果没有选中任何单选框,则弹出提示框提示用户选择一条记录进行修改或删除。
阅读全文