单击按钮时显示产品详细信息-解网

问：

<script>
    //<body>
    //<div class="prod"></div>
    //<div class="details"></div>
    //</body>

    const product=document.querySelector(".prod");

    var ourRequest=new XMLHttpRequest();
    ourRequest.open('GET','http://inec.sg/assignment/retrieve_records.php');
    ourRequest.onload=function(){
    var data=JSON.parse(ourRequest.responseText);
    renderHTML(data);
    };
    ourRequest.send();

    function renderHTML(data){
        for(var i=0;i<data.songs.length;i++){
            product.innerHTML+=`
            <div><img src="${data.songs[i].image}" height="200px"></div>
            <div><h2>${data.songs[i].name}</h2></div>
            <div><h2>$${data.songs[i].price}</h2></div>
            <button id="">Details</button>
            `;
         }  
    }

    //how do i display prod details when click on button? Able to hide the prod listing div, show the details in details div?
    // details eg. data.songs.image, data.songs.brand, data.songs.style, data.songs.discount, data.songs.price
    
</script>

点击按钮时如何显示产品详细信息？能否隐藏产品列表div，在详细信息div中显示详细信息？

详细显示以下内容： data.songs.image、data.songs.brand、data.songs.style、data.songs.discount、data.songs.price

数组 json ajax javascript 对象

<button class="load">Load List</button>
<button class="hide">Hide List</button>
<div class="prod"></div>
<div class="details"></div>
<script>
    const product = document.querySelector(".prod");
    const details = document.querySelector(".details");

    const loadBtn = document.querySelector(".load");
    const hideBtn = document.querySelector(".hide");

    loadBtn.addEventListener("click", () => { // on click of load button
        // send request to get data
        var ourRequest = new XMLHttpRequest();
        ourRequest.open(
          'GET',
          'http://inec.sg/assignment/retrieve_records.php'
        );
        ourRequest.onload = function () {
            var data = JSON.parse(ourRequest.responseText);
            renderHTML(data);
        };
        ourRequest.send();

        function renderHTML(data) {
            product.innerHTML = ""; // empty product element
            for (var i = 0; i < data.songs.length; i++) {
                product.innerHTML += `
                <div><img src="${data.songs[i].image}" height="200px"></div>
                <div><h2>${data.songs[i].name}</h2></div>
                <div><h2>$${data.songs[i].price}</h2></div>
                <button data-index="${i}" class="detailsBtn">Details</button>
                    `; // data-index represents the index of the item in the songs array
            }
            let detailsBtns = document.querySelectorAll(".detailsBtn"); // get button element(s) previously created
            for (var i = 0; i < detailsBtns.length; i++) {
                let detailsBtn = detailsBtns[i];
                detailsBtn.addEventListener("click", () => { // add on click event for individual details btn
                    // load details
                    let index = detailsBtn.dataset.index; // get index of song item
                    let song = data.songs[index];
                    details.innerHTML = `<h2>${song.image}</h2><h2>${song.brand}</h2><h2>${song.style}</h2><h2>${song.discount}</h2><h2>${song.price}</h2>`;
                });
            }
        }
    });

    hideBtn.addEventListener("click", () => { // hide details when hide details button is clicked
        product.innerHTML = ""; // empty product element
        details.innerHTML = ""; // empty details element
    });
</script>

首先，我声明并分配了常用元素，如、、和。productdetailshideBtnloadBtn
我使用该函数将单击事件绑定到、和。EventTarget.addEventListener()loadBtnhideBtndetailsBtn
我使用箭头函数作为事件的回调函数，但当然可以使用 ES5 函数。
我使用 HTMLElement.dataset 属性将歌曲索引链接到每个产品，因此我可以将产品项的 HTML 链接到其相应的 JS 事件功能。

还有很多其他方法可以做到这一点，但这就是我解决问题的方式。

上一个：JQuery Ajax 在请求中发送输入数组的巧妙方式？

下一个：JSF 在对话框编辑记录后使用 AJAX 更新数据表，该记录已使用 actionListener 完全填充

单击按钮时显示产品详细信息

Display product details when click on button

评论