我有一个应用程序,用户可以添加项目到他们的购物车。他们的cart使用Spring数据JPA持久化,并保存在MySQL数据库中。无论如何,我希望“添加到购物车”文本更改为“删除”,然后反之亦然,当再次单击按钮。
我尝试过不同的方法,例如使用常规JS和尝试更改innerHTML,以及我在这里找到的一些JQuery方法,但似乎无法更改。当前位于index.html文件脚本中的代码只是我尝试过的代码的一个例子。
另外,为了清楚起见,add-to-cart正在工作。只是点击时没有改变。
谢谢你的帮忙。
index.html索引
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{fragments/main_layout}">
<head th:replace="fragments :: head"></head>
<body>
<nav th:replace="fragments :: navigation"></nav>
<h1 th:text="${title}" class="display-5">Add Cheeses</h1>
<p th:unless = "${cheeses} and ${cheeses.size()}">No Items</p>
<table class="table">
<tr>
<th>Name</th>
<th>Description</th>
<th>Category</th>
<th>Price</th>
<th></th>
</tr>
<tr th:each ="cheese : ${cheeses}">
<td th:text ="${cheese.name}"></td>
<td th:text ="${cheese.description}"></td>
<td th:text="${cheese.type}"></td>
<td th:text ="${cheese.price}"></td>
<td>
<form method="post">
<button type="submit" id="changeBtn" onclick="myFunction()" class="btn btn-success btn-sm" name = "cheeseId" th:value="${cheese.id}" th:id="${cheese.id}">Add to Cart</button>
</form>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function myFunction() {
if (document.getElementById("changeBtn").innerHTML == "Add to Cart") {
document.getElementById("changeBtn").innerHTML = "Remove";
}
else document.getElementById("changeBtn").innerHTML = "Add to Cart";
}
</script>
</body>
</html>
片段.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:fragment="head">
<meta charset="UTF-8"/>
<title th:text = "${title}"></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.1/materia/bootstrap.min.css">
<script th:src="@{webjars/jquery/jquery.min.js}"></script>
<script th:src="@{webjars/jquery/bootstrap.min.js}"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" th:fragment="navigation">
<a class="navbar-brand" href="#">Shop</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/cheese">List</a>
</li>
<li class="nav-item" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/cheese/add">Add</a>
</li>
<li class="nav-item" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/cheese/remove">Remove</a>
</li>
<li class="navbar-right" sec:authorize="isAuthenticated()">
<a class="nav-link" href="/cheese/account">Account</a>
</li>
<li class="navbar-right" sec:authorize="!isAuthenticated()">
<a class="nav-link" href="/cheese/login">Login</a>
</li>
<li class="navbar-right" sec:authorize="!isAuthenticated()">
<a class="nav-link" href="/cheese/signup">Signup</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" th:action="@{/logout}" method="post" sec:authorize="isAuthenticated()">
<input class="form-control mr-sm-2" type="hidden" />
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Logout</button>
</form>
</div>
</nav>
<body>
</body>
</html>
