带if条件的JavaScript注入HTML实现div显隐时功能失效如何解决

问题根因 #

你代码里的两个if判断是连续执行的逻辑，没有分支隔离，导致加载逻辑刚执行完就被清空逻辑覆盖了：

• 初始状态show_video_feed_bool = false，调用函数时第一个if判断成立，执行load加载视频内容，同时把变量修改为true
• 代码会立刻进入第二个if判断，此时变量已经是true，直接执行innerHTML = ""清空容器，相当于刚加载的内容直接被删除，所以看不到生效效果。

修复方案 #

把第二个if改成else即可，让两个分支每次调用只执行其中一个：

var show_video_feed_bool = false;
function show_video_feed() {
    if (show_video_feed_bool == false) {
        $("#video-container").load("include/video.html");
        show_video_feed_bool = true;
    } else {
        document.getElementById("video-container").innerHTML = "";
        show_video_feed_bool = false;
    }
}

如果要避免load异步加载的时序问题，可以给加载方法加回调，保证内容加载完成后再修改状态：

var show_video_feed_bool = false;
function show_video_feed() {
    if (show_video_feed_bool == false) {
        $("#video-container").load("include/video.html", function() {
            // 加载完成后再修改状态，避免状态和实际内容不同步
            show_video_feed_bool = true;
        });
    } else {
        $("#video-container").empty();
        show_video_feed_bool = false;
    }
}

内容的提问来源于stack exchange，提问作者Joe