點擊 Function 使用 AJAX Jquery Javascript

Question

我正在制作一個電影評論 web 網站作為學校的一個項目，我想點擊 function 在圖像電影封面上，它將加載該電影的詳細信息和評論。 我正在使用的代碼有效但似乎不實用。 我的 loadReviews function 中的參數是數據庫的電影 ID。

            $(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) 電影的細節。 每個圖像都分配有 class '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並僅使用選擇器中的id ，您還可以使用jQuery從任何給定的clicked元素中查詢DOM並查找所需的相對元素，而無需使用id 。

Answer 2

如果無法更改HTML

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

Answer 3

我建議不要使用“ cover”類和帶有id的data參數，而不是為每個封面使用ID。

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

js代碼如下所示：

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

Answer 4

使用循環可以使每個圖像加載同一（＃12）電影的細節。

發生這種情況是因為，當循環結束時，變量的值始終是最后一個，而事件將在將來發生。

有兩種解決方法（ 立即調用函數表達式 ）：

 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> 

第二種方法是基於id的（即：獲取最后一個部分的id：刪除封面字符串）：

 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 5

您正面臨典型的“回調內部外觀”上下文問題。

讓我們檢查一下代碼。

有這個：

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

意味着僅在發生click事件時才運行函數內部的代碼，而在附加事件時才運行，因此運行時將采用這種方式：

// 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
}

解決循環的一種快速方法是使用在函數內部聲明的變量來調用函數，因此外部操作永遠不會更改它。

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);
}

這些是將代碼修改為可以正常工作的最快方法，但是以這種方式處理事件時，最好的方法是僅將一個事件附加到父對象，捕獲單擊的元素並從那里獲取ID。 附加的事件越少，一切就越快。

Answer 6

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

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn btn-primary" id="cover1">Cover Primary</button> <button class="btn btn-success" id="cover2">Cover Success</button> <button class="btn btn-danger" id="cover3">Cover Danger</button> <button class="btn btn-warning" id="cover4">Cover Warning</button> <button class="btn btn-info" id="cover5">Cover Info</button>