使用“jQuery”设置动画;。不是();
我正在用jQuery创建一个非常简单的测验应用程序。它的工作原理是你有一个问题和三个答案。点击错误答案会使点击答案的不透明度降低到60%。点击正确答案会使所有错误答案完全消失,只剩下正确答案 该页面有3个可通过导航选择的测验。因此,我使用.index()对测试和问题进行排序,以针对手头的特定问题。这与测验的其他内容一样有效 我唯一的问题是,在选择正确答案时,其他答案会逐渐消失。现在,只有第一个问题是这样运作的;所有其他问题保持100%不透明度。我整晚都在盯着它想把它弄走,可能需要一双额外的眼睛 代码:使用“jQuery”设置动画;。不是();,jquery,jquery-animate,opacity,Jquery,Jquery Animate,Opacity,我正在用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>
测试
你知道多少?(选择一个测试)
-
-
-
哪些血细胞将氧气输送到全身?
白细胞
红细胞
氧电池
如果你…;
想象您在测试期间处于一个舒适的位置
穿红色的衣服
考试前一周不要睡觉
你为什么要验血
确保你有血
因为这比数学考试容易
这样医生就可以检查你的健康了
你需要多久做一次验血
一年一次
一个月两次
这取决于你的健康状况
你的身体需要多长时间来更换血液测试中的血液
一年
一天
一小时
在一次典型的血液测试中抽取了多少血液
大约半杯
大约一茶匙
大约1/2加仑
平均来说,一个人体内有多少血液
一加仑多一点
1/2加仑
四加仑
哪些血细胞能帮助你的身体抵抗感染
军队细胞
白血球
红细胞
如果你被割伤了,哪些细胞可以帮助你止血
血小板
红细胞
堵塞电池
你皮肤上的抽血区域必须清洁,因为…
看起来干净总是好的
血液样本不受感染很重要
这次测试不会有那么大的伤害
如果你有贫血意味着你的血液
红细胞太多了
红细胞太少
白细胞过多
美国每年进行多少次血液化学测试
十万
300万
60亿
血细胞是在哪里制造的
你的心
你的骨髓
加州
全血细胞计数(CBC)是一种检测
对您血液中的所有不同细胞进行计数
var theList = $('.test:eq(' + testNum + ') li:eq(' + qustNum + ') ol li');
var theList = $('.test').eq(testNum).find('li').eq(qustNum).find('ol li');
theList.not('.correct').animate({ opacity : 0 }, 1000);
$(this).siblings().animate({ opacity : 0 }, 1000);