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');