javascript - jQuery- .load() 更多带有嵌入 youtube 视频的 div

Question

我的网站上有一个视频页面，其中包含许多 div，其中嵌入了带有标题、描述等的 youtube 视频。

我怎样才能使它只显示前 3 个 div，然后为每次单击“加载更多”按钮加载另外三个。

我已经尝试隐藏所有 div，然后 .show() 显示前三个，然后在每次单击时显示下三个，但是由于某种原因，嵌入视频或 iframe，当你“显示（ ）“ 他们。只有其他 html 元素实际出现。

这是我失败的尝试：

$(function(){
            $("div").slice(0, 3).show(); // select the first three
            $("#load").click(function(e){ // click event for load more
                e.preventDefault();
                $("div:hidden").slice(0, 3).show(); // select next 3 hidden divs and show them
                if($("div:hidden").length == 0){ // check if any hidden divs still exist
                    alert("No more divs"); // alert if there are none left
                }
            });
        });

Answer 1

使用show/hidedisplay:在. 使用 时，不会渲染元素（也不会加载视频）。您可以改用或可能绝对将“隐藏”的 div 放置在屏幕外，然后在单击“加载更多”按钮时将它们移回。display:blockdisplay:nonedisplay:nonevisibility: hiddenposition:absolute; top:-9999px