单击图像时在两个DIV之间切换

Question

专家

我的要求是在我的jsp上显示总注册行，用户也可以点击旁边的图像来编辑它们， 使用以下jpeg显示总注册行Im 使用代码

在总计旁边显示铅笔

<div class="row-fluid" id ="result">
        <div class ="span2">
            <label><spring:message code='total.registration' />:</label>
        </div>
        <div class = "span3">
            ${registrationStatusForm.totalRegis}
            <img src="/static/img/icon_pensil.png">
        </div>
    </div>

当用户点击显示的值旁边的铅笔时，应显示另一个文本框，如下所示 点击铅笔，用户应该可以编辑总数，图标也不同，如上所示。

点击X后，用户应再次看到第一张图片。

请建议一种合适的方法来实现这一目标。

Answer 1

您可以使用.toggle()

$('img').on('click', function(){
  $('your selector').toggle();
});

Answer 2

我会使用jquery。您可以使用

隐藏/显示元素

$('#element_id').show() 
$('#element_id').hide().

因此，例如，如果您想在点击图片时显示新的div，请收听点击事件：

$('#pencil_picture_id').click(function(){
  $('#text_box').show();
});

编辑：忘了括号