0

ページに 1 つのテキスト フィールドと小さなアイコン (edit.png) がある状況があります。最初はテキスト フィールドがreadonlyモードになっています。これをクリックするedit.pngと、テキスト フィールドから属性が削除さreadonlyれます。それは正常に動作しますが、今はこれをやりたいと思っています。
クリックすると、テキストフィールドからedit.png属性が削除され、アイコン自体がアイコンに変わります。これは私のコードです。これを達成するにはどこを変更すればよいかを提案してください。readonlysave.png

<html>
<head>
    <script language="JavaScript">
        function removeAlignment(x){
        var read=document.getElementById(x).removeAttribute("readonly",0);
        if(document.getElementById("toogle").value==="OK")
        {
           document.getElementById("toogle").value="SAVE";
        }
        }
    </script>

    <style type="text/css">
         a.table-actions-button {
            width: 1.25em;
            height: 1.25em;
            display: inline-block;
            background-position: center center;
         }
         .ic-table-edit { background-image: url("actions-edit.png"); }
    </style>
</head>
<body>
   <p>
     <label for="email">Email</label>
     <input type="text" name="email" id="email" value="abcd@dsa.com" readonly="readonly"/>
     <a href="#" class="table-actions-button ic-table-edit" title="Edit" onclick="removeAlignment('email');"></a>
  </p>
     <input type="submit" id="toogle" value="OK" />
</body>

どこを変更すればよいですか？マイページに従って回答してください。

4

2 に答える 2

0

これが編集です。

if(document.getElementById("toogle").value==="OK")
{
    document.getElementById("toogle").value="SAVE";
    $('.ic-table-edit').css('background-image', 'url("actions-save.png")');
}
于 2013-04-27T06:05:15.580 に答える
0

コードに j クエリ プラグインが含まれていることを確認してください。アンカー タグ内に、タグを含めます<img>。トグル機能でsrcは、画像の属性を新しい画像に変更するだけです。以下のサンプルコードを見つけてください

<html>
<head>

    <script>
        function removeAlignment(x){
        var read=document.getElementById(x).removeAttribute("readonly",0);
        if(document.getElementById("toogle").value==="OK")
        {
           document.getElementById("toogle").value="SAVE";
           $("#image").attr("src","actions-save.png");
        }
        }
    </script>

    <style type="text/css">
         a.table-actions-button {
            width: 1.25em;
            height: 1.25em;
            display: inline-block;
            background-position: center center;
         }
    </style>
</head>
<body>
   <p>
     <label for="email">Email</label>
     <input type="text" name="email" id="email" value="abcd@dsa.com" readonly="readonly"/>
     <a href="#" class="table-actions-button ic-table-edit"  title="Edit" onclick="removeAlignment('email');"><img src="actions-edit.png" id="image"></a>
  </p>
     <input type="submit" id="toogle" value="OK" />
</body>
</html>
于 2013-04-27T07:24:10.600 に答える