Avec les tests multivariés de Google Website Optimizer, puis-je modifier plusieurs classes CSS sur une même div?

Question

Je souhaite utiliser les tests multivariables de Google Website Optimizer (GWO) pour tester différentes versions d'une page Web. Je peux changer d'une version à juste en faisant varier des balises de classe sur une div, à savoir les différentes versions sont de cette forme:

<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> 

Dans l'idéal, je serais en mesure d'utiliser le code de la section GWO en place de chaque classe, et google serait juste échanger dans les balises appropriées (foo1 ou foo2, bar1 ou bar2). Cependant, en faisant naïvement ce résultat dans le code horriblement difforme parce que je serais en train de mettre <script> balises dans l'attribut de classe de la div:

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

Et en effet, le navigateur CHOKES partout.

Ma meilleure approche actuelle est juste d'utiliser un autre div pour chaque variable dans le test, comme suit:

<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> 

test donc plusieurs variables nécessite couche de div nichant par variable, et tout semble plutôt gênant.

Y a-t-il une meilleure approche que je pourrais utiliser dans laquelle je fais juste varier les classes sur une seule div?

Answer 1

Probablement la meilleure façon est la suivante:

<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>