jQuery动画与“.not（）”

Question

我正在用jQuery创建一个非常简单的测验应用程序。它是如何工作的，你有一个问题和三个答案。点击错误的答案会使点击答案的不透明度下降到60％。点击正确的答案应该使所有错误的答案完全消失，只留下正确的答案。

该页面有3个可通过导航进行选择的测验。所以我通过使用.index（）的测试和问题排序来针对特定的问题。作为测验的其他元素工作正常。

我遇到的唯一问题是获得其他答案，以淡出选择正确的答案。目前，只有第一个问题是以这种方式运作的;所有其他问题保持在100％不透明度。我一直盯着它整个试图让它去，可以使用一个额外的眼睛在这个。

CODE：

$('#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&#8230; 
        <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&#8230;</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由嵌套的有序列表构建而成。

感谢您的任何帮助。我敢打赌，我忽略了一些简单的东西。

Answer 1

更换：

theList.not('.correct').animate({ opacity : 0 }, 1000); 

随着：

$(this).siblings().animate({ opacity : 0 }, 1000); 

Answer 2

更改此

var theList = $('.test:eq(' + testNum + ') li:eq(' + qustNum + ') ol li'); 

到

var theList = $('.test').eq(testNum).find('li').eq(qustNum).find('ol li');