jQuery：如何使用 id 获取当前标签的文本？

Question

我想用 jQuery 发送 ajax GET 请求，我需要将实体的 id 发送到控制器。我正在使用 thymeleaf th:each 循环来显示实体。我编写的代码适用于第一个实体，但不适用于其他实体。

以下是HTML页面代码：

<div th:each="course : ${session.courses}" >
        <img th:src="@{'/images/' + ${course.image.imageURL}}" alt="">
        <h3 class="text-dark" id="course-id" th:text="${course.courseId}" style="display: none;" ></h3>
        <h3 class="text-dark" th:text="${course.courseName}"></h3>
        <p class="mt-3 mb-4 pl-lg-4" th:text="${course.title}"></p>
        <a th:text="${course.courseDuration}"></a>
        <a th:text="${course.noOfSets}"></a>
        <a class="btn button-cour-w3ls text-white" th:href="@{'course_details?cid='+${course.courseId}}" role="button">Learn More</a>
        <a class="btn bg-dark text-white" id="apply-course"  role="button">Apply Now</a>
</div>

这是 jQuery 代码：

$("#apply-course").click(function(e){
    e.preventDefault();
    var courseId = $("#course-id").text();
    var data="/?cid="+courseId;
    $.ajax({
        url : "/course/apply_course/"+data,
        type : "GET",
        success : function(result){
            if(result.status){
                alert("Data transfer successfull");
            }
            else{
                alert(result.message);
            }
        }

    });
});

请帮我解决这个问题。

Answer 1

您正在查询一个 ID id="apply-course"，由于您的循环而多次出现。 尝试改用一个类。

<h3 class="text-dark" **class**="course-id" ...
...
<a class="btn bg-dark text-white" id="apply-course"  role="button">Apply Now</a>

然后在你的js中：

$(".apply-course").click(function(e) { // .apply-course
e.preventDefault();
var courseId = $(this).parent().find('.course-id').text(); // $(this) instead of query id
...

最后一点：它叫 jQuery my friend :D