动态更改 HTML 元素的属性？

Question

我正在尝试将图像和特定 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);

Answer 1

您的函数代码从未真正被调用，当前您只是声明一个名为

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