Блог

Главная - Вопросы по программированию - Передача параметра с событием onclick

Передача параметра с событием onclick

#javascript #jquery #ajax #parameters #onclick

#javascript #jquery #ajax #параметры #onclick

Вопрос:

Я работаю над проектом с вызовами 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);
}}

Что я хочу здесь сделать, так это то, что когда пользователь нажимает на кнопку класса, идентификатор курса для этой кнопки становится «currentCourseId» и может быть передан в getStudentsInCourses, чтобы он мог вызывать студентов для этого курса. Я просматривал веб-страницы в поисках правильного способа передачи этой переменной, но пока ни один метод не сработал. Есть ли у кого-нибудь какие-либо указания на то, как передать эту переменную?

Итак, это должно быть что-то вроде этого: когда пользователь нажимает одну из classButtons, идентификатор курса этой кнопки передается функции «getStudentsInCourses» как «currentCourseId»

Комментарии:

1. Я думаю, если я правильно понимаю, что вы пытаетесь здесь сделать, вы можете установить идентификатор каждой кнопки в качестве соответствующего CourseID. Затем вы можете установить одинаковый прослушиватель нажатия кнопки для всех ваших кнопок, но внутри прослушивателя нажатия кнопки вызовите функцию getStudentsInCourses и в качестве параметра передайте идентификатор кнопки, на которую нажали.

2. Что не так с вашим кодом ? Вы получили сообщение об ошибке?

3. ‘currentCourseId’, который передается в ‘getStudentsInCourses’, всегда является идентификатором курса последней сгенерированной кнопки, а не кнопки, на которую нажимают.

4. Единственная проблема, которую я вижу с этой логикой, заключается в том, что вы пытаетесь выполнить цикл на основе количества ключей в данных, а не на основе количества элементов в data.courses. jsfiddle.net/398f1gsL

Ответ №1:

В Jquery вы можете использовать событие click для выполнения логики. Не забудьте вызвать функцию перед приведенным ниже событием click.

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

Если у вас есть вопросы или вы неправильно поняли ваш запрос, дайте мне знать =)

Ответ №2:

Кажется, у меня это работает. Возможно, проблема в вашей courseId переменной? Вы уверены, что это не тот же идентификатор?

 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>