遍历 wordpress 文章并添加 css class with js

Question

希望你今天过得愉快:)

我目前正在开发一个插件。我想遍历所有文章：单击时 => 打开弹出窗口，当弹出窗口关闭时 => 显示此内容...我的代码仅适用于第一篇文章。抱歉，如果这对您来说似乎微不足道，如果您有链接或教程可以给我建议，我很感兴趣:)

谢谢！

function socialLocker() {
    let sl = document.querySelector(".ws-sl-container");
    let slc = document.querySelector(".ws-sl-content");

    document.querySelectorAll(".ws-sl-box-for-social-medias a").forEach(function(ele) {
        ele.onclick = function(e) {
            var web_window = window.open(this.href, 'Share Link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600,top=' + (screen.height/2 - 300) + ',left=' + (screen.width/2 - 300));
            var check_window_close = setInterval(function() {
                if (web_window.closed) {
                    clearInterval(check_window_close);
                    sl.style.display = "none";
                    slc.style.display = "block";
                }
            }, 1000);
            e.preventDefault();
        };
    });
};

Answer 1

似乎是文档中选择元素的问题。

您可以使用 next 选择器：https://api.jquery.com/next/ 而不是全选并使用 foreach 循环。使用next，您将获得最接近的元素。

假设您列表中的所有帖子都有一个带有 class trigger 的按钮，单击它时会显示一个带有 popup 的 class 的弹出窗口。

<script>
    jQuery(document).ready(function(){
        jQuery(".popup").hide(); /* hide all popups */
        jQuery(".trigger").click(function(){ /* when button is clicked */
            jQuery(this).next(".popup").slideToggle(); /* toggle the closest popup */
        });
    });
</script>

这样 (this) 元素上的点击/操作（您希望在关闭时进行）会影响最近的元素。

遍历 wordpress 文章并添加 css class with js

loop through wordpress articles and add a css class with js

javascript

wordpress

wordpress-plugin-creation