使Optimizely Variation Code Cleaner

时间:2015-07-17 16:24:20

标签: jquery optimizely

看看是否有人有任何关于使我在Optimizely的变体代码部分中使用以下代码更清洁的建议:

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>");

这就是我想要附加到正文的内容(可以在Optimizely中编辑html,但它非常混乱):

<div id="optslidebox">
    <a class="close"></a>
    <p>Recommended</p>
    <h2><a href="#">WHO ARE YOUR FAVORITE RAPPERS' FAVORITE RAPPERS RIGHT NOW?</a></h2>
</div>

我想知道如何将div存储到变量中,如果有意义的话,optslidebox div中的项目。我也有兴趣了解我如何实施所有变量以使它们显示在体内。

提前致谢!

1 个答案:

答案 0 :(得分:1)

您可以使用replaceWith代替html,因为您似乎只需要替换innerHtml。我们喜欢用数组连接来清理它,但仍然是keeping the loop intact

因此,使用该模式,它看起来像

/* _optimizely_evaluate=force */ /*global $*/
window.variationHtml = [
  '<a class="close"></a>',
  '<p>Recommended</p>',
  '<h2><a href="#">WHO ARE YOUR FAVORITE RAPPERS\' FAVORITE RAPPERS RIGHT NOW?</a></h2>',
].join('');
/* _optimizely_evaluate=safe */
$("#optslidebox").html(variationHtml);

如果事情变得更加激烈,虽然我们构建了一个多行模板功能,以帮助不需要数组连接所有内容。

/* _optimizely_evaluate=force */ /*global $*/

// timpl | https://github.com/clearhead/timpl
!function(n){"use strict";function r(n){var r=i.exec(n.toString());if(!r)throw new TypeError("Multiline comment missing.");return r[1]}function t(n,r){return n.replace(c,function(n,t){for(var i=t.split("."),o=i.length,s=r,u=0;o>u;u++){if(s=s[i[u]],s===e)throw'tim: "'+i[u]+'" not found in '+n;if(u===o-1)return s}})}n.timpl=function(n,e){return t(n.call?r(n):n,e||{}).replace(/^\s+|\s+$/g,"")};var e,i=/\/\*!?(?:\@preserve)?[ \t]*(?:\r\n|\n)([\s\S]*?)(?:\r\n|\n)[ \t]*\*\//,o="{{",s="}}",u="[a-z0-9_$][\\.a-z0-9_]*",c=new RegExp(o+"\\s*("+u+")\\s*"+s,"gi")}(window);

window.variationHtml = timpl(function () { /*
  <a class="close"></a>
  <p>Recommended</p>
  <h2><a href="#">WHO ARE YOUR FAVORITE RAPPERS' FAVORITE RAPPERS RIGHT NOW?</a></h2>
*/});

/* _optimizely_evaluate=safe */
$("#optslidebox").replaceWith(window.variationHtml);