通过 Google 网站优化工具的多变量测试，我可以在一个 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 部分代码代替每个类，而 google 只需交换适当的标签（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>