1

专家

在这里我有我的代码

特定事件可以有多个频道，例如 For **

  • 活动一

    渠道

    • 活动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>:&nbsp; </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>
4

1 回答 1

1

首先，在循环中使用 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>:&nbsp; </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();
});
于 2013-07-20T06:58:43.450 回答