Изменение фона div на основе результатов викторины

Question

Хорошо, я застрял здесь немного. Для работы мне пришлось создать викторину и основываться на результатах (наибольшее количество As, Bs, Cs, Ds или Es), они хотели бы, чтобы цвет фона соответствующего div слегка изменил цвет. Я сделал некоторые поиска вокруг с немного удачи, но вот то, что я до сих пор (это все в одном файле, так как контент-менеджер мы используем не позволяет связать правильно.

<script type="text/javascript"> 
    var winner = 0; 

    function checkTest() { 
     var Acount = 0; 
     var Bcount = 0; 
     var Ccount = 0; 
     var Dcount = 0; 
     var Ecount = 0; 

     if ($('input[type="radio"][name=amReach]:checked').val() == "Q1A") { Acount++; } 
     if ($('input[type="radio"][name=amReach]:checked').val() == "Q1B") { Bcount++; } 
     if ($('input[type="radio"][name=amReach]:checked').val() == "Q1C") { Ccount++; } 
     if ($('input[type="radio"][name=amReach]:checked').val() == "Q1D") { Dcount++; } 
     if ($('input[type="radio"][name=amReach]:checked').val() == "Q1E") { Ecount++; } 

     if ($('input[type="radio"][name=transportation]:checked').val() == "Q2A") { Acount++; } 
     if ($('input[type="radio"][name=transportation]:checked').val() == "Q2B") { Bcount++; } 
     if ($('input[type="radio"][name=transportation]:checked').val() == "Q2C") { Ccount++; } 
     if ($('input[type="radio"][name=transportation]:checked').val() == "Q2D") { Dount++; } 
     if ($('input[type="radio"][name=transportation]:checked').val() == "Q2E") { Ecount++; } 

     if ($('input[type="radio"][name=SocialNetwork]:checked').val() == "Q3A") { Acount++; } 
     if ($('input[type="radio"][name=SocialNetwork]:checked').val() == "Q3B") { Bcount++; } 
     if ($('input[type="radio"][name=SocialNetwork]:checked').val() == "Q3C") { Ccount++; } 
     if ($('input[type="radio"][name=SocialNetwork]:checked').val() == "Q3D") { Dcount++; } 
     if ($('input[type="radio"][name=SocialNetwork]:checked').val() == "Q3E") { Ecount++; } 

     if ($('input[type="radio"][name=FridayNight]:checked').val() == "Q4A") { Acount++; } 
     if ($('input[type="radio"][name=FridayNight]:checked').val() == "Q4B") { Bcount++; } 
     if ($('input[type="radio"][name=FridayNight]:checked').val() == "Q4C") { Ccount++; } 
     if ($('input[type="radio"][name=FridayNight]:checked').val() == "Q4D") { Dcount++; } 
     if ($('input[type="radio"][name=FridayNight]:checked').val() == "Q4E") { Ecount++; } 

     if ($('input[type="radio"][name=HIMYM]:checked').val() == "Q5A") { Acount++; } 
     if ($('input[type="radio"][name=HIMYM]:checked').val() == "Q5B") { Bcount++; } 
     if ($('input[type="radio"][name=HIMYM]:checked').val() == "Q5C") { Ccount++; } 
     if ($('input[type="radio"][name=HIMYM]:checked').val() == "Q5D") { Dcount++; } 
     if ($('input[type="radio"][name=HIMYM]:checked').val() == "Q5E") { Ecount++; } 

     if ($('input[type="radio"][name=MileyCyrus]:checked').val() == "Q6A") { Acount++; } 
     if ($('input[type="radio"][name=MileyCyrus]:checked').val() == "Q6B") { Bcount++; } 
     if ($('input[type="radio"][name=MileyCyrus]:checked').val() == "Q6C") { Ccount++; } 
     if ($('input[type="radio"][name=MileyCyrus]:checked').val() == "Q6D") { Dcount++; } 
     if ($('input[type="radio"][name=MileyCyrus]:checked').val() == "Q6E") { Ecount++; } 

     if ($('input[type="radio"][name=WeatherForecaster]:checked').val() == "Q7A") { Acount++; } 
     if ($('input[type="radio"][name=WeatherForecaster]:checked').val() == "Q7B") { Bcount++; } 
     if ($('input[type="radio"][name=WeatherForecaster]:checked').val() == "Q7C") { Ccount++; } 
     if ($('input[type="radio"][name=WeatherForecaster]:checked').val() == "Q7D") { Dcount++; } 
     if ($('input[type="radio"][name=WeatherForecaster]:checked').val() == "Q7E") { Ecount++; } 

     var most = Math.max(Acount, Bcount, Ccount, Dcount, Ecount) 
     if (most = Acount) { winner = As } 
     if (most = Bcount) { winner = Bs } 
     if (most = Ccount) { winner = Cs } 
     if (most = Dcount) { winner = Ds } 
     if (most = Ecount) { winner = Es } 
    } 
</script> 

    <table> 
     <tr> 
      <td>1. When you wake up in the morning you reach for _____.<br /> 
       <input value="Q1A" type="radio" name="amReach" />A. Your running shoes<br /> 
       <input value="Q1B" type="radio" name="amReach" />B. Your cellphone<br /> 
       <input value="Q1C" type="radio" name="amReach" />C. Your dog's leash<br /> 
       <input value="Q1D" type="radio" name="amReach" />D. What? I never slept.<br /> 
       <input value="Q1E" type="radio" name="amReach" />E. The newspaper<br /> 

      </td> 
      <td>5. Which <em>How I Met Your Mother</em> character do you most relate to?<br /> 
       <input value="Q5A" type="radio" name="HIMYM" />A. I don't watch TV<br /> 
       <input value="Q5B" type="radio" name="HIMYM" />B. Robin<br /> 
       <input value="Q5C" type="radio" name="HIMYM" />C. Marshall and Lily<br /> 
       <input value="Q5D" type="radio" name="HIMYM" />D. Barney<br /> 
       <input value="Q5E" type="radio" name="HIMYM" />E. Ted<br /> 

      </td> 
     </tr> 
     <tr> 
      <td>2. My preferred mode of transportation is _____.<br /> 
       <input value="Q2A" type="radio" name="transportation" />A. Bike<br /> 
       <input value="Q2B" type="radio" name="transportation" />B. Car<br /> 
       <input value="Q2C" type="radio" name="transportation" />C. Walking<br /> 
       <input value="Q2D" type="radio" name="transportation" />D. Limousine<br /> 
       <input value="Q2E" type="radio" name="transportation" />E. Rapid<br /> 

      </td> 
      <td>6. The Miley Cyrus song that best represents my life is _____.<br /> 

       <input value="Q6A" type="radio" name="MileyCyrus" />A. "We Can't Stop"<br /> 
       <input value="Q6B" type="radio" name="MileyCyruS" />B. "The Climb"<br /> 
       <input value="Q6C" type="radio" name="MileyCyrus" />C. "The Best of Both Worlds"<br /> 
       <input value="Q6D" type="radio" name="MileyCyrus" />D. "Party in the U.S.A."<br /> 
       <input value="Q6E" type="radio" name="MileyCyrus" />E. "Wrecking Ball"<br /> 
      </td> 
     </tr> 
     <tr> 
      <td>3. You can connect with me on _____.<br /> 
       <input value="Q3A" type="radio" name="SocialNetwork" />A. Foursquare<br /> 
       <input value="Q3B" type="radio" name="SocialNetwork" />B. LinkedIn<br /> 
       <input value="Q3C" type="radio" name="SocialNetwork" />C. Facebook<br /> 
       <input value="Q3D" type="radio" name="SocialNetwork" />D. Twitter<br /> 
       <input value="Q3E" type="radio" name="SocialNetwork" />E. Instagram<br /> 
      </td> 
      <td>7. The weather forecaster I trust most is _____.<br /> 
       <input value="Q7A" type="radio" name="WeatherForecaster" />A. Angelica Campos<br /> 
       <input value="Q7B" type="radio" name="WeatherForecaster" />B. Mark Johnson<br /> 
       <input value="Q7C" type="radio" name="WeatherForecaster" />C. Betsy Kling<br /> 
       <input value="Q7D" type="radio" name="WeatherForecaster" />D. Jeff Tanchak<br /> 
       <input value="Q7E" type="radio" name="WeatherForecaster" />E. Dick Goddard<br /> 
      </td> 
     </tr> 
     <tr> 
      <td>4. On a Friday night, you'll likely find me _____.<br /> 
       <input value="Q4A" type="radio" name="FridayNight" />A. Cheering at a sporting event<br /> 
       <input value="Q4B" type="radio" name="FridayNight" />B. Enjoying a great meal<br /> 
       <input value="Q4C" type="radio" name="FridayNight" />C. Curled up watching a movie<br /> 
       <input value="Q4D" type="radio" name="FridayNight" />D. Wherever the party is<br /> 
       <input value="Q4E" type="radio" name="FridayNight" />E. Listening to a lecture<br /> 
      </td> 
      <td style="vertical-align: middle;"> 
       <input value="Submit" type="submit" onclick="checkTest()"> 
      </td> 
     </tr> 
    </table> 
<br /> 
<hr /> 
<br /> 
<a id="results"></a> 
<h3 style="color:#CC0000">Results:</h3> 
<div style="padding-bottom: 10px; padding-left: 10px; width: 750px; padding-right: 10px; padding-top: 10px"> 
    <div class="result" id="As"> 
     <!--<img src="/Media/MediaManager/A_Shoe.jpg" class="pic" alt="" /><br /> 
--> 
     <div><span class="MostlyHeader">Mostly A's</span></div> 
     <div><span class="header">ACTIVE ADVENTURER</span></div> 
     <div>You're always on the go whether you're training for a marathon, pumping iron or cheering on the home team.</div> 
     <p><span class="youLive">You live at:</span> Euclid Block Apartments, a hip, affordable East Fourth address close to The Q, Progressive Field and a gym.</p> 
     <p><span class="number">1.</span><!--<img src="/Media/MediaManager/A_Shoe.jpg" style="float:right; alt="" />-->Gather your weekend chi with free yoga classes at the House of Blues. Leave your stress behind, but bring your own mat.</p> 
     <p><span class="number">2.</span> Hop on your bike and cycle over to Good To Go Cafe on East Ninth for a quick smoothie.</p> 
     <p><span class="number">3.</span><!--<img src="/Media/MediaManager/A_Shoe.jpg" style="float:right; alt="" />-->Swing by Hermes Cleveland to pick up your race packet for tomorrow's 5k.</p> 
     <p><span class="number">4.</span> Down a protein-packed double decker rice and beans burger ($17) at Greenhouse Tavern.</p> 
     <p><span class="number">5.</span><!--<img src="/Media/MediaManager/A_Shoe.jpg" style="float:right; alt="" />-->Score some pointers for your jump shot while watching Kyrie Irving and the rest of the Cavs at The Q.</p> 
    </div> 

Answer 1

Использование JQuery вы можете манипулировать . СМЧ-свойства элементов легко

Изменение цвета фона элемента будет называться так:.

$('[your element]').css('background','yellow');

Обмен [ваш элемент] с применимым селекторе CSS

Также см здесь:

http://api.jquery.com/css/

Только в случае, если: Вы должны включить JQuery-библиотеку для этого.