JavaScript 仅使用 thymeleaf 更改第一次迭代的文本

Question

希望你一切都好。

我有一个学校作业，我希望能够动态更改“项目”的名称。这个作业是关于项目的。我现在所做的方式适用于使用百里香迭代的“项目”列表中的第一个“项目”。我知道我现在所做的绝对是糟糕的代码行为，但是我们还没有教过 JS。但我真的很想要这个功能。 我不知道如何使每个项目预览都起作用，现在它适用于第一个预览，但对于其余部分，它只是从数据库中删除项目名称。 （见图）

<div class="projects" th:each="projectNames : ${listOfProjects}">
                <form action="deleteProjectPost" method="post">
                    <input type="hidden" th:value="${projectNames.projectID}" name="deleteID">
                    <input type="image" src="delete.png"  alt="Submit" align="right" class="deleteProject" onclick="return confirm('Are you sure that you want to delete this project?')">
                </form>
                <form action="/editProjName" method="post">
                    <input type="hidden" name="projectID" th:value="${projectNames.projectID}">
                    <input type="hidden" id="oldName" th:value="${projectNames.projectName}">
                    <input type="hidden" id="newName" name="projectName">
                    <input type="image" src="edit.png"  alt="Submit" onclick="change_text()" align="right" class="editProject">
                </form>
                <form action="/projectPost" method="post">
                    <input class="projectInfo" name="projectID" type="text" th:value="'Project No.: ' + ${projectNames.projectID}" readonly="readonly">
                    <input class="projectInfo"  type="text"  th:value="'Project name: ' + ${projectNames.projectName}" readonly="readonly">
                    <input class="projectInfo" type="text" th:value="${projectNames.projectStartDate}  + ' - ' + ${projectNames.projectEndDate}" readonly="readonly">
                    <input type="submit" value="OPEN" class="openProject">
                </form>
            </div>

<script>
    function change_text() {
        var changedText;
        var projectName = prompt("Please enter name of project:");
        var oldName = document.getElementById("oldName").value;
        if (projectName === null || projectName === "") {
            changedText = oldName;
        } else {
            changedText = projectName;
        }
        document.getElementById("newName").value = changedText;
    }
</script>

HTML 中的第一个表单是删除整个“项目”的红十字。第二种形式旨在更改“项目预览”上显示的名称，但仅适用于第一次预览并从其余部分中删除项目名称。最后一种形式是实际的预览。在使用 Java Spring 和 Thymeleaf 时，我找不到另一种方法来拥有多个表单并执行不同的 POSTS。
我的愿望是让 change_text() 函数适用于每个“项目预览”

最好的问候！

Answer 1

function change_text(imageInput) {
  var changedText;
  var projectName = prompt("Please enter name of project:");
  var oldName = imageInput.parentNode.querySelector('.old-name').value;
  
  if (projectName === null || projectName === "") {
    changedText = oldName;
  } else {
    changedText = projectName;
  }
  
  imageInput.parentNode.querySelector('.new-name').value = changedText;
}

  <form action="/editProjName" method="post">
    <input type="hidden" name="projectID" th:value="${projectNames.projectID}">
    <input type="hidden" class="old-name" id="oldName" th:value="${projectNames.projectName}">
    <input type="hidden" class="new-name" id="newName" name="projectName">
    <input type="image" src="edit.png" alt="Submit" onclick="change_text(this)" align="right" class="editProject">
  </form>

好的，所以我做了一些更改。首先，注意oldName 和newName 的输入现在有类。这些可以重复。如果您没有将 id 用于脚本以外的任何内容，则应将其删除。否则，如果您对它们有样式规则，则应考虑将这些 CSS 规则更改为使用该类，以便删除无效的重复 id。

其次，图像的 onlick 现在传入this。它的作用是传递用户单击的实际输入，因此您可以了解用户正在与哪个表单元素进行交互的上下文。

然后看逻辑，该方法现在接受imageInput，这是来自onclick的this。

使用imageInput.parentNode，我们沿着 DOM 树向上到达输入的父元素，即本例中的表单。然后我们可以转身使用querySelector 来查找我们想要操作的表单中的另一个元素。它只会找到我们特定形式的元素，因为这是我们要选择的。