javascript - 通过 Google Website Optimizer 的多变量测试，我可以在一个 div 上改变多个 css 类吗？

Question

我想使用 Google 网站优化工具 (GWO) 的多变量测试来测试网页的一些不同版本。我可以通过改变 div 上的一些类标签来从一个版本更改到另一个版本，即不同的版本是这种形式的:

<div id="testing" class="foo1 bar1">content</div>
<div id="testing" class="foo1 bar2">content</div>
<div id="testing" class="foo2 bar1">content</div>
<div id="testing" class="foo2 bar2">content</div>

在理想情况下，我可以使用 GWO 部分代码代替每个类，而谷歌只会交换适当的标签( foo1 或 foo2 、 bar1 或 bar2 )。但是，天真地这样做会导致代码格式错误，因为我会尝试将 <script> div 类属性中的标签:

<div id="testing" class="
  <script>utmx_section("foo-class")</script>foo1</noscript>
  <script>utmx_section("bar-class")</script>bar1</noscript>
">
  content
</div>

事实上，浏览器在这一切上都卡住了。

我目前最好的方法就是为测试中的每个变量使用不同的 div，如下所示:

<script>utmx_section("foo-class-div")</script>
  <div class="foo1">
</noscript>
  <script>utmx_section("bar-class-div")</script>
    <div class="bar1">
  </noscript>
    content
  </div>
</div>

因此，测试多个变量需要为每个变量嵌套一层 div，这看起来很尴尬。

有没有我可以使用的更好的方法，我只需要改变单个 div 上的类？

Answer 1

可能最好的方法是:

<div id="testing">content</div>

<script>
var testingDiv = document.getElementById('testing');
</script>

<script>utmx_section("foo-class-div")</script>
  <script>
  testingDiv.setAttribute('class', testingDiv.getAttribute('class') + ' foo1');
  </script>
</noscript>
<script>utmx_section("bar-class-div")</script>
  <script>
  testingDiv.setAttribute('class', testingDiv.getAttribute('class') + ' bar1');
  </script>
</noscript>