4

私のアプリケーションのユーザーは、「変更」ボタンをクリックして電子メールと電話番号を変更できるはずです。これは私のコードです:

    <div class="field-group">
     ...............
     ....................
        <div class="field field-omschrijving">
          <label class="label">E-mailadres</label><div>@client.email</div>
         </div>
         <div class="field field-omschrijving field-last">
           <label class="label">Telefoonnummer</label><div>@client.phoneNumber</div>
         </div>
         <input type="submit" class="form-submit" value="Change" name="op">
       </div><!-- /.field-group -->

私は解決策を探していましたが、成功しませんでした。どうすれば解決できるのでしょうか? ありがとう！

素早い対応ありがとうございます！しかし..私の間違い、私が言いたかったのは、フィールドが「通常の方法」で表示され、ユーザーがボタンの変更をクリックすると「編集可能な方法」に変更される必要があるということです。現在、フィールドの電子メールは次のようになります。 ! ここに画像の説明を入力 私はそれが次のようになりたい：写真。 2

「変更」ボタンをクリックした後、最初の画像のように見える必要があります。再度、感謝します！

4

6 に答える 6

3

クリック後にこのコードを使用すると、写真のようにラベルを入力に変更できます。それは今あなたを助けます、願っています 

 $( ".button_class" ).click(function() {
       $('.class_Of_label_email').replaceWith($('<input>' + $('.class_Of_label_email').innerHTML + '</input>'));
    });

次に例を示します。

<div class="container">
<div class="first">Hello</div>
<div class="second">And</div>
<div class="third">Goodbye</div>
</div>
 $( ".container" ).click(function() {
$( "div.second" ).replaceWith( "<h2>New heading</h2>" );
}

結果は次のとおりです。

<div class="container">
<div class="inner first">Hello</div>
<h2>New heading</h2>
<div class="inner third">Goodbye</div>
</div>

うまくいけば、それは役に立ちます

于 2013-11-14T13:11:29.780 に答える
2

メールと電話番号のボタンと入力フィールドに id を与えます。ボタンをクリックすると、ラベルが非表示になり、入力フィールドが表示されます。

<div class="field-group">
    <div class="field field-omschrijving">
        <label class="label">E-mailadres</label>
        <div id="divemail">@client.email</div>
        <div id="divemailinput"><input type="text" id="emailId"/></div>
    </div>

    <div class="field field-omschrijving field-last">
        <label class="label">Telefoonnummer</label>
        <div id="divno">@client.phoneNumber</div>
        <div id="divnoinput"><input type="text" id="emailId"/></div>
    </div>
    <input id="btnchange" type="submit" class="form-submit" value="Change" name="op"/>
</div><!-- /.field-group -->

JS

$("#btnchange").click(function(){
    $("#divemail").hide();
    $("#divemailinput").hide();
    $("#divno").hide();
    $("#divnoinput").hide();
});
于 2013-11-14T11:05:23.993 に答える
1

最初に必要なのは、@client.email と @client.phoneNumber を入力に入れ、それらを非アクティブに設定することです。次に、クリックした後、javascript を使用してそれらをアクティブに変更します。

<input type="text" class="emailand_clas" readonly="readonly" >@client.emailand </input>

そしてjqueryを使用：

$( ".button_class" ).click(function() {
    $('.emailand_clas').attr('readonly','')
});

このようなもの

于 2013-11-14T11:00:34.387 に答える
0

素晴らしい例については、この JSFiddle または私のブログをご覧ください。

http://jsfiddle.net/biniama/YDcFF/

<!DOCTYPE html>
<head>
<title>jQuery enable/disable button</title>
<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
<script type='text/javascript'>
$(function(){
     $('#submitBtn').click(function(){
        $('.enableOnInput').prop('disabled', false);
        $('#submitBtn').val('Update');
     });
});
</script>
<style type='text/css'>
     /* Lets use a Google Web Font :) */
     @import url(http://fonts.googleapis.com/css?family=Finger+Paint);
     /* Basic CSS for positioning etc */
     body {
          font-family: 'Finger Paint', cursive;
          background-image: url('bg.jpg');
     }
     #frame {
          width: 700px;
          margin: auto;
          margin-top: 125px;
          border: solid 1px #CCC;
          /* SOME CSS3 DIV SHADOW */
          -webkit-box-shadow: 0px 0px 10px #CCC;
         -moz-box-shadow: 0px 0px 10px #CCC;
         box-shadow: 0px 0px 10px #CCC;
         /* CSS3 ROUNDED CORNERS */
         -moz-border-radius: 5px;
         -webkit-border-radius: 5px;
         -khtml-border-radius: 5px;
         border-radius: 5px;
         background-color: #FFF;
     }
     #searchInput {
          height: 30px;
          line-height: 30px;
          padding: 3px;
          width: 300px;
     }
     #submitBtn {
          height: 40px;
          line-height: 40px;
          width: 120px;
          text-align: center;
     }
     #frame h1 {
          text-align: center;
     }
     #frame div {
          text-align: center;
          margin-bottom: 30px;
     }
</style>
</head>
<body>
    <div id='frame'>    
        <div class='search'>
            <h1>jQuery Enable and Disable button</h1>

            <input type='text' name='searchQuery' id='searchInput' class='enableOnInput' disabled='disabled'/> 
            <input type='submit' name='submit' id='submitBtn' value='Edit'/>

        </div>
    </div>
</body>
</html>
于 2014-07-23T07:57:14.347 に答える