wordpress 如何获取document.querySelectorAll以将类的成员存储在sessionStorage或localStorage中并在另一个页面上显示它们？

jgovgodb 于 2023-10-16 发布在 WordPress

关注(0)|答案(1)|浏览(86)

在过去的3天里，我一直试图让这段代码工作，但真的碰壁了。我试图做的是创建JS代码，将检索文章预告片在某个主题从我的主页（通过类标识符），并显示在一个单独的主题页面（例如。如果这篇文章是关于一个小部件的，预告片也会显示在小部件页面上）。
我使用document.getElementById创建了一个功能代码，但它并没有完成我需要它做的事情，因为你只能有一个ID的示例，并且每个主题中会有多个文章（我已经包含了这个代码用于一个类的比较以简化事情）。因此，我假设需要document.querySelectorAll或document.getElementsByClassName，并且必须包含代码，以便在主题页面上的每一项之间添加一个div，以进行间距设置。
请随意使用不同的方法。但是，由于我在WordPress中使用Visual Composer，因此它需要是JavaScript。提前感谢您的任何帮助或建议！
只要您只需要为每个主题选择一个项目，以下代码就可以工作（不是这种情况）：

window.onload = function filterContent() {
    // Check browser support
    if (typeof(Storage) !== "undefined") {
        // Retrieve
        var EV = document.getElementById("EV").innerHTML;
        window.localStorage.setItem('EVId', EV);
        var button =
        window.localStorage.getItem('address');
        document.getElementById("EV3").href = button;
     } else {
            document.getElementById("EV2").value = "Browser does not support Web Storage.";
     }
}

下面是我使用document. querySelectorAll修改后的代码。它不工作（消失在一个巨大的黑洞中）。我试过添加一些皱纹，比如使用Array.from属性（var EVArray = Array.from（EV）），但没有成功：

window.onload = function Array() {
    if (typeof(Storage) !== "undefined")    
        {
        var EV = document.querySelectorAll('.EV');
        for (var i = 0; i < EV.length; i++) {
            let EVId = window.localStorage.setItem('EVId', EV);
            var EVResults = window.localStorage.getItem('EVId');
            document.querySelectorAll('.EV2').innerHTML = EVResults;
            var button =
            window.localStorage.getItem('address');
            document.querySelectorAll('.EV3').href = button;
        }
    } else {
        document.querySelectorAll('.EV2').value = "Browser does not support Web Storage.";}
    }
}

wordpress

来源：https://stackoverflow.com/questions/77294091/how-do-i-get-document-queryselectorall-to-store-members-of-a-class-in-sessionsto

1条答案

按热度按时间

m3eecexj1#

我在你修改后的代码中看到了以下问题：
1.永远不要重新定义Array函数。Array函数是一个保留的函数名。请为您的函数使用不同的名称。

document.querySelectorAll总是返回一个NodeList。它永远不会返回一个元素。这意味着您不能直接使用innerHTML或整个NodeList上的其他属性设置或获取值。为了设置或获取值，您需要遍历NodeList并处理每个单独的元素。
下面是代码的更正版本：

window.onload = function () {
    if (typeof (Storage) !== "undefined") {
        // Get all elements with the class 'EV'
        var EVElements = document.querySelectorAll('.EV');
        
        // Initialize an array to store the article data
        var articles = [];

        // Loop through each 'EV' element
        EVElements.forEach(function (EV, index) {
            // Get the content or data you want to store for each article
            var articleContent = EV.innerHTML;
            
            // Store the article content in an array
            articles.push(articleContent);

            // Store the article content in localStorage with a unique key
            window.localStorage.setItem('EVId' + index, articleContent);
        });

        // Save the articles array to localStorage if you want to access them on another page
        window.localStorage.setItem('articles', JSON.stringify(articles));

        // Store other data like button href if needed
        var button = window.localStorage.getItem('address');
        EVElements.forEach(function (EV) {
            EV.querySelector('.EV3').href = button;
        });
    } else {
        // Handle the case when the browser doesn't support Web Storage
        EVElements.forEach(function (EV) {
            EV.querySelector('.EV2').textContent = "Browser does not support Web Storage.";
        });
    }
}

赞(0）回复(0）举报 2023-10-16

我来回答

wordpress 如何获取document.querySelectorAll以将类的成员存储在sessionStorage或localStorage中并在另一个页面上显示它们？

1条答案

相关问题

热门标签

最新问答