Нажмите «Функция» с помощью AJAX JQuery Javascript

Question

Я делаю веб-сайт для просмотра фильмов в качестве проекта для школы, и я хочу поместить функцию клика на обложку фильма, в которой будут загружены детали и обзоры этого фильма. Код, который я использую, работает, но не кажется практичным. Параметр в моей функции loadReviews - это идентификатор фильма для базы данных.

  $(document).ready(function() { 
       $("#cover1").click(function() { loadReviews(1); }); 
       $("#cover2").click(function() { loadReviews(2); }); 
       $("#cover3").click(function() { loadReviews(3); }); 
       $("#cover4").click(function() { loadReviews(4); }); 
       $("#cover5").click(function() { loadReviews(5); }); 
       $("#cover6").click(function() { loadReviews(6); }); 
       $("#cover7").click(function() { loadReviews(7); }); 
       $("#cover8").click(function() { loadReviews(8); }); 
       $("#cover9").click(function() { loadReviews(9); }); 
       $("#cover10").click(function() { loadReviews(10); }); 
       $("#cover11").click(function() { loadReviews(11); }); 
       $("#cover12").click(function() { loadReviews(12); }); 
      }); 

Как вы можете видеть, я пишу каждый вручную. Я попытался использовать цикл for, как это, но не работает так, как я думал.

   for (i = 1; i < 12; i++) { 
        $("#cover" + i).click(function() { loadReviews(i); }); 
       } 

Используя петлю, каждое изображение загружает детали одного и того же фильма (# 12). Каждому изображению присваивается класс 'cover1', 'cover2' и т. Д. Я хочу, чтобы какой-то «цикл» автоматически привязывал каждое событие клика к правильному обложке изображения. Я использую общий обработчик в Visual Studio 15. Мы должны использовать ajax и jquery для обновления страницы без обратной передачи, так я получаю фильмы и обзоры.

Если мне нужно показать больше кода, дайте мне знать. Благодаря!

Answer 1

Вы можете уйти с одним обработчиком кликов и сохранить идентификатор в качестве атрибута данных. Так что ваш повторен HTML элемент может быть что-то вроде этого:

<div class="cover" data-movieid="1"> 
    ... 
</div> 
<div class="cover" data-movieid="2"> 
    ... 
</div> 
etc. 

Затем назначить один обработчик щелчка и в пределах этого обработчика получить идентификатор из элемента, который был щелкнули. Что-то вроде этого:

$(document).ready(function() { 
    $('.cover').click(function() { 
     var movieID = $(this).data('movieid'); 
     loadReviews(movieID); 
    }); 
}); 

В зависимости от того, что делает loadReviews(), вы можете вероятно сделать все это проще. Вместо того, чтобы давать все id s и только, используя те, что указаны в ваших селекторах, из любого выбранного элемента щелчка вы можете использовать jQuery для запроса DOM и поиска нужного вам относительного элемента без использования id.

Answer 2

Вместо использования идентификаторов для каждой крышки я бы рекомендовал использовать класс «обложка» и параметр данных с идентификатором.

<div class"cover" data-movieid="1"></div> 

и код JS будет выглядеть следующим образом:

$(document).ready(function() { 
    $(".cover").click(function() { loadReviews($(this).data('movieid')); }); 
}); 

Answer 3

Используя петлю он делает каждое изображение загружать детали одного и того же (# 12) кино.

Это происходит потому, что, когда цикл заканчивается, значение переменной всегда является последним, в то время как событие произойдет в будущем.

Два пути ее решения (Immediately-invoked function expression):

function loadReviews(i) { 
 
    console.log(i); 
 
} 
 

 

 
for (i = 1; i < 5; i++) { 
 
    (function(i) { 
 
     $("#cover" + i).on('click', function (e) { 
 
      loadReviews(i); 
 
     }); 
 
    }(i)); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<button id="cover1">Cover 1</button> 
 
<button id="cover2">Cover 2</button> 
 
<button id="cover3">Cover 3</button> 
 
<button id="cover4">Cover 4</button> 
 
<button id="cover5">Cover 5</button>

Второй способ основан на ид (я.е: получить последнюю часть идентификатора: удалить строку обложки):

function loadReviews(i) { 
 
    console.log(i); 
 
} 
 
for (i = 1; i < 5; i++) { 
 
    $("#cover" + i).click(function() { 
 
     loadReviews(this.id.replace('cover', '')); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<button id="cover1">Cover 1</button> 
 
<button id="cover2">Cover 2</button> 
 
<button id="cover3">Cover 3</button> 
 
<button id="cover4">Cover 4</button> 
 
<button id="cover5">Cover 5</button>

Answer 4

Если HTML не может быть изменен

$("[id^=cover]").click(function() { 
    var rev = parseInt(this.id.replace(/\D+/g, '')); 
    loadReviews(rev); 
}); 

Answer 5

Вы столкнулись с типичным «обратным вызовом внутри посмотрите "контекстную проблему.

Давайте проверим код.

Имея это:

$("#cover1").click(function() { 
    loadReviews(1); 
}); 

означает, что код внутри функции будет работать только тогда, когда происходит событие щелчка, а не тогда, когда прилагается событие, поэтому во время выполнения будет идти по этому пути:

// First, attaches the event 
$("#cover1").click(function() { 
    // This will be run when user clicks, so will be called last 
    loadReviews(1); 
}); 
// The runtime will continue right BEFORE the click callback is run 

Так в цикле времени выполнения будет идти по этому пути:

for (i = 1; i < 12; i++) { 
    // var i value starts from 0. And attaches the click event 
    $("#cover" + i).click(function() { 
     // Runs after all the loop is done (when the i value is 12) 
     loadReviews(i); 
    }); 
    // loop continue BEFORE the content of the click callback is run 
} 

Один быстрый ш ay, чтобы исправить ваш цикл, - это вызов функции с переменной, объявленной внутри функции, поэтому она не будет изменяться внешними действиями.

function attachClick(id) { 
    // This will be run on each loop, creating a id variable 
    // that will be unique for this context 
    $("#cover" + id).click(function() { loadReviews(id); }); 
} 
for (i = 1; i < 12; i++) { 
    // Call the function passing the i variable as parameter 
    attachClick(i); 
} 

И так, что вы будете себе много вокруг есть путем создания анонимных функций (делает точно так же, как описано выше, но без создания имени функции в другом месте):

for (i = 1; i < 12; i++) { 
    (function(id) { 
     $("#cover" + id).click(function() { 
      loadReviews(id); 
     }); 
    })(i); 
} 

Это самый быстрый способы изменения вашего кода, чтобы иметь рабочий, но при работе с событиями таким образом лучше всего прикрепить только одно событие к родительскому элементу, захватить элемент, щелкнув и получить идентификатор оттуда. Чем меньше событий связано, тем быстрее все.