在 Optimizely 中隐藏附加的 div答案

【问题标题】：Hiding an appended div in Optimizely在 Optimizely 中隐藏附加的 div
【发布时间】：2015-07-06 16:57:21
【问题描述】：

在下面的代码中，我无法在用户到达最后一段之前隐藏附加的 div。 div 在页面加载时显示正确，我希望它仅在用户到达“最后一个”ID 时显示。

$('body').append('<div id="optslidebox"></div>');

$(".slide-content > p").attr("id", "last");

window.scrollBox = function () {
    $(window).scroll(function () {
        /* when reaching the element with id "last" we want to show 
        the slidebox. Let's get the distance from the top to the element */
        var distanceTop = window.$('#last').offset().top - window.$(window).height();

        if (window.$(window).scrollTop() > distanceTop) {
            window.$('#optslidebox').animate({'right': '0px'}, 300);
        } else {
            window.$('#optslidebox').stop(true).animate({'right': '-430px'}, 100);
        }
    });

    /* remove the slidebox when clicking the cross */
    $('#optslidebox.close').bind('click', function () {
        $(this).parent().remove();
    });
};

【问题讨论】：

附加的 div 上是否有 close 类？
是的，有一个关闭div的按钮。
您上面的代码没有在#optslidebox elem 上显示该类close
它在附加的 div 中如下：

更多技术与科学（23 篇文章中的 4 篇）

科学研究和新技术的社会影响
阅读更多»
您的选择器希望 close 成为 optslidebox 上的一个类 - 添加一个空格使其成为子选择器：$('#optslidebox .close')

标签： jquery append show-hide optimizely

【解决方案1】：

问题来自变体代码。 “Right”设置为“0px” - 一旦更改为“-999px”，一切都很好。这是最终的变体代码：

    window.scrollBox();
    $("#related-posts").css({"z-index":"1"});
    $("#optslidebox").replaceWith("<div id=\"optslidebox\" style=\"z-index:2; right: -999px;\">\n\t<a class=\"close\"></a>\n\t<p>Recommended</p>\n\t<h2>WHO ARE YOUR FAVORITE RAPPERS' FAVORITE RAPPERS RIGHT NOW?</h2>\n</div>");
    $("#optslidebox > h2").wrapInner("<a href=\"http://greenlabel.com/sound/rappers-who-skate-skaters-who-rap/\"></a>");

【讨论】：

科学研究和新技术的社会影响