专家
这是我的代码
特定事件可以有多个通道,例如对于**
-
事件1
通道
- 事件2
通道
**最初每个事件的通道值是相同的,现在当用户想要编辑通道值时,比如对于事件1,编辑的值也反映在事件2通道中,这不应该发生,编辑后的值应该只反映在该特定事件中
在jsp中显示针对事件的通道的代码是
<div class="container-fluid left-padded">
<input data-focus-div="#" type="hidden" value="${divId}">
<div class="container-fluid">
<h4><spring:message code="event.details" />:</h4>
<c:forEach var="sendStatusForm" items="${eventStatusForm.sendStatusForms}">
<div class="row-fluid">
<div class ="span2">
<label><spring:message code="event.channels"></spring:message>: </label>
</div>
<div class = "span3">
<div class="textbox">
<div class="textVal">${eventStatusForm.channels}</div>
<div id="pencil" class="span3">
<img src="/static/img/image1.png" alt="Edit">
</div>
<div id="save" class="span3">
<img src="/static/img/image2.png" alt="Save">
</div>
<div id="close" class="span3">
<img src="/static/img/image3.png" alt="Close">
</div>
</div>
</div>
</DIV>
</c:forEach>
</DIV>
</div>
Jquery代码是
var textValue = "";
$('#pencil').on('click', function(){
textValue = $('.textVal').text();
$('.textVal').html("<input type='textbox' id='textVal' value='" + textValue + "' />");
$(this).hide();
$('#save, #close').show();
});
$('#save').on('click', function(){
$('.textVal').text($('#textVal').val());
$(this).hide();
$('#close').hide();
$('#pencil').show();
});
$('#close').on('click', function(){
$('.textVal').text(textValue);
$(this).hide();
$('#save').hide();
$('#pencil').show();
});
最后,CSS代码是
<style type="text/css">
.textbox {
height:24px;
width:90px;
line-height:22px;
padding:3px
}
#textVal {
width:35px;
margin-right:5px
}
.icons {
float:left;
width:20px;
height:20px;
}
#save, #close {
display:none;
width:20px;
height:20px;
float:left
}
.textVal {
float:left;
width:35px;
height:20px;
margin-right:5px
}
#pencil {
display:block
}
</style>
首先,在循环中使用id属性时要小心,因为您会生成无效的HTML标记。Id属性在页面中必须是唯一的,请为元素使用类。
<c:forEach var="sendStatusForm" items="${eventStatusForm.sendStatusForms}">
<div class="row-fluid">
<div class ="span2">
<label><spring:message code="event.channels"></spring:message>: </label>
</div>
<div class = "span3">
<div class="textbox">
<div class="textVal">${eventStatusForm.channels}</div>
<div class="pencil span3">
<img src="/static/img/image1.png" alt="Edit">
</div>
<div class="save span3">
<img src="/static/img/image2.png" alt="Save">
</div>
<div class="close span3">
<img src="/static/img/image3.png" alt="Close">
</div>
</div>
</div>
</DIV>
</c:forEach>
现在,在进行编辑时,只需要针对行中的特定元素,因此使用.siblings()
来过滤每个事件中的元素:
var textValue = "";
$('.pencil').on('click', function(){
textValue = $(this).siblings('.textVal').text();
$(this).siblings('.textVal').html("<input type='text' id='textVal' value='" + textValue + "' />");
$(this).hide();
$(this).siblings('.save, .close').show();
});
$('.save').on('click', function(){
$(this).siblings('.textVal').html($(this).siblings('.textVal').find(':text').val());
$(this).hide();
$(this).siblings('.close').hide();
$(this).siblings('.pencil').show();
});
$('.close').on('click', function(){
$(this).siblings('.textVal').html(textValue)
$(this).hide();
$(this).siblings('.save').hide();
$(this).siblings('.pencil').show();
});