我正在尝试将图像和特定 HTML 元素的内容更改为存储在 .js 文件中的内容。内容存储在导入到 main.js 的另一个 js 文件中声明的对象中。
export function products() {
return
[
{
"id": "1001",
"name": "MG RX-78-2 3.0",
"scale": "1/100",
"comp": "Bandai",
"price": "1,350,000 đ",
"type": "MG",
"status": 1,
"poster": "https://cdn.shopify.com/s/files/1/2786/5582/products/mg-rx-78-2-gundam-ver-3-0-pa_1.jpg?v=1660244450"
}
];
}
预计会在加载时更新页面。文件运行顺利,没有出现任何重大问题,但没有应用任何更改。
import { products } from "./data.js";
(function ($) {
"use strict";
$(document).ready(function () {
function products_gen() {
let product_list = products();
let check = [];
for(let i = 0; i < product_list.length(); i++){
check.push(false);
}
for(let i = 0; i < 8; ){
let rando = Math.floor(Math.random()*product_list.length());
if(!check[rando]){
check[rando] = true;
document.getElementById("products_1_poster").src = product_list[rando].poster;
console.log(document.getElementById("products_1_poster").src);
document.getElementById("products_1_name").innerHTML = product_list[rando].name;
document.getElementById("products_1_price").innerHTML = product_list[rando].price;
i++;
}
}
}
});
})(jQuery);
您的函数代码从未真正被调用,当前您只是声明一个名为
products_gen
的函数,但从未调用它。如果删除下面的两行注释,这将使您的代码实际在文档准备就绪时运行。
或者,您可以保留命名函数,只需添加
products_gen()
作为其后的下一行即可实际调用它。
如果您将
console.log(product_list)
添加到现有函数中,您应该能够看到它从未真正运行。
import { products } from "./data.js";
(function ($) {
"use strict";
$(document).ready(function () {
// function products_gen() {
let product_list = products();
let check = [];
for(let i = 0; i < product_list.length(); i++){
check.push(false);
}
for(let i = 0; i < 8; ){
let rando = Math.floor(Math.random()*product_list.length());
if(!check[rando]){
check[rando] = true;
document.getElementById("products_1_poster").src = product_list[rando].poster;
console.log(document.getElementById("products_1_poster").src);
document.getElementById("products_1_name").innerHTML = product_list[rando].name;
document.getElementById("products_1_price").innerHTML = product_list[rando].price;
i++;
}
}
//}
});
})(jQuery);