Jquery：如何將圖像添加到刪除按鈕

我正在研究一個類項目，以在jquery中創建一個購物列表。我正在努力解決兩個類似的問題。你可以從圖像中看到，我有一個「添加」按鈕和一個刪除「X」，這兩個功能都是他們應該的。Jquery：如何將圖像添加到刪除按鈕

我試圖用我在Adobe Illustrator中創建的圖像替換這兩個對象，第一個是「plus +」圖標，第二個是「minus - 」圖標。

任何意見是非常感謝。

$(document).ready(function() { 
 

 
\t $("#input-form").submit(function() { 
 
\t \t var newItem = $("#input-item").val(); 
 

 
\t \t if (newItem.length > 0) { 
 

 
\t \t \t var listItem = "<li>"; 
 
\t \t \t listItem += "<input type='checkbox'>"; 
 
\t \t \t listItem += "<span>" + newItem + "</span>"; 
 
\t \t \t listItem += "<span class='remove'>X</span>"; 
 
\t \t \t listItem += "</li>"; 
 

 
\t \t \t $("#items").append(listItem); 
 
\t \t } 
 
\t \t return false; 
 
\t }) 
 

 
}) 
 

 
$(document).on("click", ".remove", function() { 
 
\t $(this).parent().remove(); 
 
})

<body> 
 
\t <div id="main"> 
 
\t \t <header> 
 
\t \t \t <h1>Shopping List</h1> 
 
\t \t </header> 
 
\t \t <div id="input"> 
 
\t \t \t <form id="input-form"> 
 
\t \t \t \t <input id="input-item" type ="text"> 
 
\t \t \t \t <button type="submit">add</button> 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t \t <div id="list"> 
 
\t \t \t <ul id="items"> 
 
\t \t \t \t <!-- Items will go here --> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 
</body>

來源

2016-03-01 Roger Corbett

[與使用jQuery一個圖像按鈕更換一個提交按鈕]的可能的複製（http://stackoverflow.com/questions/3202075/replacing-a-submit：在任何情況下，你可以通過添加圖片 - 按鈕上帶有一個圖像按鈕-使用-jquery的） –

我看到你正在使用的附加<button>標籤和<span>爲刪除。

<button type="submit"><img src="your/image/url"/></button> 
<span class="remove"><img src="your/image/url"/></span>

來源

2016-03-01 22:09:29 Anubhab

Jquery：如何將圖像添加到刪除按鈕

回答

相關問題