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 代码的末尾，但它不显示？在萤火虫中看起来像这样：

萤火虫

我在做什么使它不显示？

4

5 回答 5

1

您正在尝试在输入中显示图像。尝试使用样式可编辑的 div 或其他东西。

于 2012-10-04T19:27:57.063 回答
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

您可能想在输入之后插入图像，而不是在其中。为此，请使用 jQuery 的after函数，而不是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 回答
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 回答