我正在使用jQuery创建一个非常简单的测验应用程序。它是如何工作的，你有一个问题和三个答案。单击错误的答案会使单击的答案的不透明度渐变为60％。点击正确的答案应该会使所有错误的答案完全淡出，只剩下正确的答案。
该页面有3个测验可供导航选择。因此，我使用.index（）对测试和问题进行排序，以针对手头的具体问题。其中与测验的其他元素一样正常工作。
我遇到的唯一问题是在选择正确答案时淡出其他答案。现在，只有第一个问题是这样运作的;所有其他问题仍保持100％不透明度。我一整天都在盯着它试图让它去，并且可以使用额外的一双眼睛。
代码：
$('#test .test li ol li').click(function()
{
if($(this).attr('class') == 'correct')
{
var testNum = $(this).closest('.test').index('.test');
var qustNum = $(this).index('.correct');
var corAns = $(this);
var theList = $('.test:eq(' + testNum + ') li:eq(' + qustNum + ') ol li');
//find other questions
theList.not('.correct').animate({ opacity : 0 }, 1000);
getAnswer(testNum, qustNum, corAns);
}
else
{
$(this).animate({ opacity : 0.6 }, 500);
}
});
function getAnswer(testNum, qustNum, corAns)
{
console.log(testNum + ' : ' + qustNum + ' : ' + corAns.text());
//get xml file with answers
$.ajax({
type: "GET",
url: "answers.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('Answers').each(function(){
//find the answer in the xml
var answer = $(this).find('test:eq(' + testNum + ') answer:eq(' + qustNum + ')').text();
console.log(answer);
//place answer inside correct li
corAns.html(answer);
});
}
});
//fade in next button
$('#test span').css({ 'display' : 'block' }).delay(2000).animate({ opacity : 1 }, 1000);
$('#test span').click(function()
{
$('.test:eq(' + testNum + ')').animate({ top : '-=286px' }, 500);
});
}
HTML：
<section class="content" id="test">
<h1 style="opacity:0;">test</h1>
<h2 style="opacity:0;">How Much Do You Know?<span>(choose a test)</span></h2>
<ul class="nav">
<li>
<img src="_images/_test/test1.jpg" />
</li>
<li>
<img src="_images/_test/test2.jpg" />
</li>
<li>
<img src="_images/_test/test3.jpg" />
</li>
</ul>
<ol class="test">
<li>
Which blood cells carry oxygen throughout your body?
<ol>
<li>White Blood Cells</li>
<li class="correct">Red Blood Cells</li>
<li>Oxygen Cells</li>
</ol>
</li>
<li>
A blood test procedure can be made easier if you…
<ol>
<li class="correct">imagine you are in a comfortable place during the test.</li>
<li>wear something red.</li>
<li>don't sleep for a week before the test.</li>
</ol>
</li>
<li>
<p>Why do you need to have blood tests?</p>
<ol>
<li>To make sure you have blood</li>
<li>Because it's easier than a math test</li>
<li class="correct">So the doctor can check your health</li>
</ol>
</li>
<li>
<p>How often do you need to have a blood test?</p>
<ol>
<li>Once a year</li>
<li>Twice a month</li>
<li class="correct">It depends on your health</li>
</ol>
</li>
<li>
<p>How long does it take for your body to replace the blood taken from a blood test?</p>
<ol>
<li>One year</li>
<li class="correct">One day</li>
<li>One hour</li>
</ol>
</li>
</ol>
<ol class="test">
<li>
<p>How much blood is drawn in a typical blood test?</p>
<ol>
<li>About half a cup</li>
<li class="correct">About one teaspoon</li>
<li>About 1/2 gallon</li>
</ol>
</li>
<li>
<p>On average, about how much blood does a person have in their body?</p>
<ol>
<li class="correct">A little more then one gallon</li>
<li>1/2 gallon</li>
<li>Four gallons</li>
</ol>
</li>
<li>
<p>Which blood cells help your body fight infection?</p>
<ol>
<li>Army cells</li>
<li class="correct">White blood cells</li>
<li>Red blood cells</li>
</ol>
</li>
<li>
<p>Which cells help you stop bleeding if get a cut?</p>
<ol>
<li class="correct">Platelets</li>
<li>Red blood cells</li>
<li>Plug-up cells</li>
</ol>
</li>
<li>
<p>The area on your skin where blood is drawn must be cleaned because…</p>
<ol>
<li>It's always better to look clean</li>
<li class="correct">It is important that the blood sample is not infected</li>
<li>The test won't hurt as much</li>
</ol>
</li>
</ol>
<ol class="test">
<li>
<p>If you have anemia it means your blood has…</p>
<ol>
<li>too many red blood cells.</li>
<li class="correct">too few red blood cells.</li>
<li>too many white blood cells.</li>
</ol>
</li>
<li>
<p>About how many blood chemistry tests are preformed in the United States each year?</p>
<ol>
<li>100,000</li>
<li>3 million</li>
<li class="correct">6 billion</li>
</ol>
</li>
<li>
<p>Where are blood cells made?</p>
<ol>
<li>Your heart</li>
<li class="correct">Your bone marrow</li>
<li>California</li>
</ol>
</li>
<li>
<p>A Complete Blood Count (CBC) is a test in which…</p>
<ol>
<li class="correct">all of the different cells in your blood are counted.</li>
<li>a machine looks at the chemicals in your blood to check for disease.</li>
<li>the amount of blood in your body is counted.</li>
</ol>
</li>
<li>
<p>Testing for blood types is important in order to…</p>
<ol>
<li class="correct">receive the right blood type if you ever need blood.</li>
<li>be eligible for a drivers license.</li>
<li>learn about your personality.</li>
</ol>
</li>
</ol>
<span>Next Question --></span>
</section>
其他： 所有console.log都显示每次单击时变量所针对的正确索引。 测试html由嵌套的有序列表构成。
感谢您提供任何帮助。我敢打赌，我忽略了一些简单的事情。
答案 0 :(得分：1)
<强>替换：
theList.not('.correct').animate({ opacity : 0 }, 1000);
。通过：
$(this).siblings().animate({ opacity : 0 }, 1000);
答案 1 :(得分：0)
更改此
var theList = $('.test:eq(' + testNum + ') li:eq(' + qustNum + ') ol li');
到
var theList = $('.test').eq(testNum).find('li').eq(qustNum).find('ol li');