javascript - JQuery 隐藏/显示出错

Question

这是我正在使用的简化示例，围绕预先存在的代码进行工作:

基本上我有 2 个 div，我想在多个地方隐藏/显示(第 1 阶段、第 2 阶段、第 3 阶段等)，如下所示:

var blue_div = "#Blue";
var red_div = "#Red";
var blue_stage = "#Blue" + count;
var red_stage = "#Red" + count;

雪上加霜该 div 存在于页面的其他位置并且被隐藏。需要将每个阶段的内容拉入另一个 div 中。所以我使用 .prepend() 来获取内容，如下所示:

var blue_html = $(blue_div).html();
var new_div = "#new_div";

$(new_div).prepend(blue_html);
$(new_div).attr('id', blue_stage); //Changing the id based on the stage

最后一部分真的让我很困惑...现在我尝试在不先结束脚本的情况下使用 new_div，所以它还没有在 DOM 中...

if ($(blue_stage).is(':hidden')) {
    $(blue_stage).show()
    $("#cancel").bind("click",function(){
        $(blue_stage).hide()
    }
}

我已经看到很多使用 Window setTimeout() 以及 setinterval 和 .queue() 所做的事情。但我的尝试全部失败了。希望我的示例不会令人困惑，如有任何帮助，我们将不胜感激!

Answer 1

我认为你可以做这样的事情:

var $new_div = $('<div id="' + blue_stage + '"></div>');

这将允许您直接编辑元素，以便您可以执行以下操作:

$new_div.prepend(blue_html);

要更改您的 ID:

$new_div.attr('id', blue_stage)

请注意，当您像这样设置 id 时，您不需要像其他答案提到的那样使用“#”