根据测验结果更改 div 的背景
Posted
技术标签:
【中文标题】根据测验结果更改 div 的背景【英文标题】：Changing the background of a div based on the results of a quiz 【发布时间】：2013-12-09 12:24:08 【问题描述】：好吧，我有点卡在这里了。为了工作，我必须创建一个测验，并根据结果（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" /><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; />-->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; />-->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; />-->Score some pointers for your jump shot while watching Kyrie Irving and the rest of the Cavs at The Q.</p>
</div>
【问题讨论】：
您所拥有的实际问题是什么？ 你试过什么？如果您花一些时间来描述您对解决方案的尝试，并定义一个特定的问题，那就更好了。 您的代码中有错误。例如：if (most = Acount) 应该是 if (most == Acount)... 等。
我的问题是我正在计算测验的结果。假设，例如在测验中点击了 6 个“A”，那么结果（在下面的 html 中）将有一个突出显示的 div 以显示为结果。我的问题是我可以计算问题等，但不知道从那里去改变背景。
【参考方案1】：
使用 JQuery，您可以轻松地操作元素的 CSS 属性。
改变元素的背景颜色会这样调用：
$('[your element]').css('background','yellow');
用适用的 CSS 选择器交换 [您的元素]。
另见此处：
http://api.jquery.com/css/
以防万一：您必须为此包含 JQuery 库。
【讨论】：
以上是关于根据测验结果更改 div 的背景的主要内容，如果未能解决你的问题，请参考以下文章