Question

我正在使用API调用进行项目。基本上，我需要能够在单击某个按钮时使用jQuery将参数传递给函数。

我正在开发一个项目，该项目调用API向用户显示类按钮。

每个按钮都会根据classId的存在而生成，该类在jQuery文件中被调用：

jQuery：

function getCourses() {
    $.ajax({
        url: apisource + "/courses",
        dataType: "json"
    }).done(function(data) {
        let dataLength = Object.keys(data).length;
        for (let i = 0; i < dataLength; i++) {
            courseId = data["courses"][i].id; //this is the important part
            nameOfClass = data["courses"][i].name;
            let classButton = ('<button type=\'button\' class=\'classButton\' onclick=\'javascript:getStudentsInCourses(' + courseId + ');\'>' + nameOfClass + '</button>'); 

            $('#classButtonContainer').append(classButton);
    }

}) 
}
getCourses();

function getStudentsInCourses(currentCourseId) {

    console.log("current course id: " + currentCourseId);

    $.ajax({
        url: apisource + "/course=" + currentCourseId + "/students",
        dataType: "json"
    }).done(function(data) {
        console.log("here are the students");
        console.log(data);
}}

我在这里想要做的是，当用户单击课程按钮时，该按钮的courseId变为“ currentCourseId”，并且可以传递给getStudentsInCourses，以便可以为该课程的学生打电话。我一直在网上寻找传递该变量的正确方法，但到目前为止，还没有方法起作用。没有人有任何如何传递此变量的指针吗？

所以应该是这样的：当用户单击classButtons之一时，该按钮的courseId将作为“ currentCourseId”传递给“ getStudentsInCourses”函数

Answer 1

在Jquery中，您可以使用click事件执行逻辑。不要忘记在下面的click事件之前调用该函数。

//your functions
$('.classButtons').on('click', function(){
   const id = $(this).attr('id');
   //now call your function with the id
   getStudentsInCourses(id);
});

如果您有任何疑问或被误解，请让我知道=）

Answer 2

似乎对我有用。也许是您的courseId变量引起了问题？您确定它不是同一个ID吗？

courseId = data["courses"][i].id;

function getCourses() {
  for (let i = 0; i < 5; i++) {
    let classButton = ('<button type=\'button\' class=\'classButton\' onclick=\'javascript:getStudentsInCourses(' + i + ');\'>Test ' + i + '</button>');
    $('#classButtonContainer').append(classButton);
  }
}

getCourses();

function getStudentsInCourses(currentCourseId) {
  console.log("current course id: " + currentCourseId);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="classButtonContainer"></div>

通过onclick事件传递参数

2 个答案: