jQuery的追加與圖像的HTML然後將其刪除不顯示

嘿我試圖下面讓我的jQuery代碼的工作：jQuery的追加與圖像的HTML然後將其刪除不顯示

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

我在做什麼，以使其不顯示？

來源

2012-10-04 StealthRT

試試這個

$('#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;\" />");

FIDDLE

來源

2012-10-04 19:28:42

真棒......它讓我如何停止生成圖像每次我按下按鈕時提交...？ – StealthRT

添加一個if條件來檢查圖像，然後添加它..檢查編輯 –

這似乎並不工作...無論如何保持添加 – StealthRT

您正在嘗試在輸入內顯示圖像。嘗試使用樣式化的可編輯div或其他東西。

來源

2012-10-04 19:27:57

你可能要插入的圖像後的輸入，而不是裏面的吧。爲此，請使用jQuery的after函數，而不是append。

作爲一種替代方法，您可以使用CSS類在輸入旁邊添加圖像，並將嵌入的HTML替換爲您的javascript。

在你的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-04 19:32:14

但是img已經有一個類已經分配給它了？ – StealthRT

在這種情況下，沒有'img'元素，圖像顯示在輸入的[':: after'僞元素]（https://developer.mozilla.org/en-US/docs/CSS/::after ） –

好像（從圖片的名字），你基本上是想表現出「關注」的形象當表格被提交併且一個字段沒有被輸入時。

正如其他帖子所說，您不能在<input>標籤內放置圖像，但這並不意味着您不能在標籤內出現圖像。

要做到這一點的方法是設置input的background風格。所以要用jQuery來做到這一點，請使用;

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

然後讓CSS

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

然後，您可以發揮一下與造型，也刪除類，當用戶將焦點設置到輸入。

來源

2012-10-04 19:32:53

輸入字段不能包含元素（以及幾乎任何東西）。使用$（'＃cf-name-txt'）。before（「」）;添加圖像和（「＃cf-name-txt-img」）。remove（）將其刪除。

甚至更好，把圖像中的HTML與樣式display：none和打開它轉變作風中顯示：塊

<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-名-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-04 19:36:45

我將有多個需要該圖標的輸入框。我只是想把它附加到任何需要它的盒子上，當他們嘗試提交表單時，他們會留下一些東西。真的不想手動把img放在每個輸入標籤旁邊... – StealthRT

jQuery的追加與圖像的HTML然後將其刪除不顯示

回答

相關問題