0

以下のjqueryコードを動作させようとしています:

function submitContactUs() {
    if ($('#cf-name-txt').val() == '' || $('#cf-name-txt').val().charAt(0) == '*') {
        $('#cf-name-txt').append("<img src=\"img/attention.png\" width=\"16\" height=\"16\" style=\"position:absolute; left: -7px; top: 7px;\" />");
    }       
}

HTML コードは次のとおりです。

<div id="contactus-name">
    <input type="text" id="cf-name-txt" style="width: 200px;" class="formBoxesContact" value="*Your Name">
</div>

上記のhtmlコードの最後に画像を追加しても動作しますが、表示されませんか? firebug では次のようになります。

火の虫

表示されないようにするために何をしていますか？

4

5 に答える 5

1

入力フィールドには要素を含めることはできません (ほとんどすべてのものと同様)。$('#cf-name-txt').before(""); を使用します。画像を追加するには $("#cf-name-txt-img").remove() で削除します。

またはさらに良いことに、スタイル display:none を使用して HTML に画像を配置し、display:block でスタイルを変更してオンにします。

   <div id="contactus-name">
    <img src="img/attention.png" id="cf-name-txt-img" width="16" height="16" style="position:absolute; left: -7px; top: 7px; display:none" />
    <input type="text" id="cf-name-txt" style="width: 200px;" class="formBoxesContact" value="*Your Name">
   </div>

$("#cf-name-txt-img").show() を使用して表示し、 $("#cf-name-txt-img").hide() を使用して削除します。

あなたの場合：

function submitContactUs() {
    var $img = $("#cf-name-txt-img");
    if ($('#cf-name-txt').val() == '' || $('#cf-name-txt').val().charAt(0) == '*') {
       $img.show();
    } else {
       $img.hide();
    }

}
于 2012-10-04T19:36:45.103 に答える
1

これを試して

$('#cf-name-txt').after("<img src=\"img/attention.png\" width=\"16\" height=\"16\" style=\"position:absolute; left: -7px; top: 7px;\" />");

また

$("<img src=\"img/attention.png\" width=\"16\" height=\"16\" style=\"position:absolute; left: -7px; top: 7px;\" />").insertAfter($('#cf-name-txt'));

入力に画像を追加しようとしています.入力タグの後に追加してみてください..

.after()動作するはずです

編集

if( !$('#cf-name-txt').next('img').length)
$('#cf-name-txt').after("<img src=\"img/attention.png\" width=\"16\" height=\"16\" style=\"position:absolute; left: -7px; top: 7px;\" />");​

フィドル

于 2012-10-04T19:28:42.063 に答える
1

入力内に画像を表示しようとしています。スタイル付きの編集可能な div などを使用してみてください。

于 2012-10-04T19:27:57.063 に答える
1

おそらく、画像を入力の中に挿入するのではなく、入力の後に挿入したいと思うでしょう。そのためには、 のafter代わりに jQuery の関数を使用しappendます。

別の方法として、CSS クラスを使用して入力の横に画像を追加し、JavaScript 内に埋め込まれた HTML を省くこともできます。

あなたのCSSで：

input.attention:after {
  content: url('img/attention.png');
}

次に、JavaScriptで：

function submitContactUs() {
  if ($('#cf-name-txt').val() == '' || $('#cf-name-txt').val().charAt(0) == '*') {
      $('#cf-name-txt').addClass("attention");
    }       
}
于 2012-10-04T19:32:14.313 に答える
1

（画像の名前から）フォームが送信され、フィールドが入力されていないときに、基本的に「注意」画像を表示したいようです。

他の投稿が言うように、タグ内に画像を配置することは<input>できませんが、これはタグ内に画像を表示できないという意味ではありません。

backgroundこれを行う方法は、 のスタイルを設定することinputです。したがって、jQuery でこれを行うには、次を使用します。

$('#cf-name-txt').addClass('alert-icon');

次にcssを用意します

input.alert-icon{ background: url(img/attention.png) no-repeat right center; }

その後、スタイリングをいじったり、ユーザーが入力にフォーカスを置いたときにクラスを削除したりできます。

于 2012-10-04T19:32:53.367 に答える