添加电影的最佳方法是什么,作为项目进入jQuery函数



尝试将电影添加到createMovieTable函数中,并将其循环到数组中,以便通过jquery函数创建HTML代码。请帮助我正确获取它 我有一个示例,但无法正常工作:

var movies = {
movie1: {
movieTitle: 'Blade Runner 2049',
},
movie2: {
movieTitle: 'Justice League',
},
movie3: {
movieTitle: 'Thor: Ragnarok',
}
};
$('.movies-table').createMovieTable(3, movies);

这是我的jquery函数:

(function($) {$.fn.createMovieTable = function (moviesNum, movies){
var $table = $("<table class='table table-movie bg-darkpink m-0'><tbody class='tbody'></tbody></table>");
for(var i = 0; i < moviesNum; ++i){
var $tableRow = $("<tr class='tr'></tr>");
var $movieCounter = $("<th scope='row' class='align-middle text-center'><h2>"+ (i + 1) +"</h2></th>"),
$moviePicture = $("<td><img src='movie-pics/" + (i + 1) + ".png' class='img-fluid img-thumbnail img-movie' alt='Responsive image'></td>"),
$movieTitle = $("<td class='align-middle text-center'><h2 style='color: #647fde;'>" + movies.movie + [i + 1].movieTitle + "</h2><a class='custom-link' data-toggle='collapse' href=''#collapse-showtime-1' aria-expanded='false' aria-controls='collapseExample'>Edit Movie <i class='fa fa-caret-down' aria-hidden='true'></i></a></td>"),
$deleteButton = $("<td class='align-middle text-center'><button type='button' class='btn custom-btn cb-dark-hover no-br delete-movie-btn'>Delete</button></td>");
this.append($table);
$('.tbody').append($tableRow);
$($tableRow).append($movieCounter);
$moviePicture.insertAfter($movieCounter);
$movieTitle.insertAfter($moviePicture);
$deleteButton.insertAfter($movieTitle);
}};})(jQuery); 

在你的代码中的某个地方,你有这个movies.movie + [i + 1].movieTitle.movies.movie + [i + 1]不是访问对象属性的方式。如果要使用string作为对象属性名称,可以使用如下所示的内容来执行此操作:

movies["movie" + (i + 1)]

这称为bracked符号。你可以找到更多关于它的信息

这里在我看来,所有这些都最好使用数组而不是对象来完成。

因此,您可以使用以下内容存储电影信息:

var movies = [{
movieTitle: 'Blade Runner 2049',
}, {
movieTitle: 'Justice League',
}, {
movieTitle: 'Thor: Ragnarok',
}];

并使用如下所示的内容访问它:

....
for(var i = 0; i < moviesNum; ++i){
.... movies[i].movieTitle .....
}

如果movieTitle是这些对象的唯一属性,您甚至可以摆脱它,只使用字符串数组而不是对象数组。

最新更新