1

こんにちは、画像クリックイベントでラベルフィールドをテキストボックスに変換したいと思います。私のhtmlファイルは

<div>
    <div id="tagCust">Customer Details<img src="images/edit.png" class="alignright"/></div>
</div>

<div id="contactdetail">
    <div id="contactInfo">
        <label for="emailid" class="contactText" data-inline="true">Email Id*</label>
    </div>
         <label for="mobileno" class="contactText" data-inline="true">Mobile No.</br></label>
         <label for="custid" class="contactText" data-inline="true">Customer Id.</label>
</div>

mobilenoユーザーが編集画像をクリックしたときに、ラベルとemailidラベルをテキストボックスに変換したい。どうやってやるの？

4

2 に答える 2

4

実際に「変換」することはできませんが.replaceWith()、ラベルhtmlまたはそれ.hide()を使用することはできます.show()。

例えば：

$('.alignright').on('click', function() {
    $('label.contactText').slice(0,2).each(function() {
        $(this).replaceWith( '<input type="text"/>' );
    });
});

.replaceWithHTML文字列の代わりにノード参照をアドレス指定することもできます。ただし、これは破壊的な方法で機能し、ラベルを再度表示する必要がない場合にのみ意味があります。それ以外の場合は、ノードの<input>作成と同時にこれらの要素を作成<label>し、CSSスタイルを指定しdisplay: noneます。クリックすると、これらのスタイルを切り替える（noneブロックする、またはその逆）か、クラスを切り替えることができます。

于 2012-07-31T10:11:39.423 に答える
0

以下またはhttp://jsfiddle.net/qAZZc/にあるコードをお勧めします。また、アクセスしやすい理由から、入力を追加してラベルを非表示にする方がよいため、ラベルを削除しません。

$("label").each(function(){
        if(($(this).attr("for") == "emailid")||($(this).attr("for") == "mobileno")){
           $(this).after("<input type='text' id='"+ $(this).attr("for") +"'/>");
           $(this).hide();
        }
    });

また、ボタンに一意のIDまたはクラスを追加するか、関数を起動するすべての場所で.alignrightを追加することをお勧めします。

于 2012-07-31T10:15:17.313 に答える