javascript - 画像をクリックして 2 つの 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();
});