Question

我正在开发一个类项目来在jquery中创建一个购物清单。我正在努力解决两个类似的问题。

从图像中可以看出，我有一个“添加”按钮和一个删除“X”，它们都应该起作用。

我正在尝试用我在Adobe Illustrator中创建的图像替换这两个对象，第一个是“加+”图标，第二个是“减号”图标。

非常感谢任何建议。

$(document).ready(function() {

	$("#input-form").submit(function() {
		var newItem = $("#input-item").val();

		if (newItem.length > 0) {

			var listItem = "<li>";
			listItem += "<input type='checkbox'>";
			listItem += "<span>" + newItem + "</span>";
			listItem += "<span class='remove'>X</span>";
			listItem += "</li>";

			$("#items").append(listItem);
		}
		return false;
	})

})

$(document).on("click", ".remove", function() {
	$(this).parent().remove();
})

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

Answer 1

我发现您使用<button>标记进行添加，使用<span>进行删除。无论如何，您可以通过以下方式添加图片：

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

Jquery：如何将图像添加到删除按钮

1 个答案: