jQuery選擇器不能在IE中工作

Question

我已經寫了一個基本的jQuery腳本（可能對你來說是一個相當醜陋的經驗豐富的jQuery獸醫），但它在Firefox等工作很好（像往常一樣），然後我切換到IE它在哪裏沒有工作。

我嘗試了很多不同的途徑，但是從我所看到的是，IE無法獲取我所要求的元素 - 我將突出顯示此問題行。

// Hide all panels. 
$("div.testimonial-panel").hide(); 

// Set the current slide as the first index 
var curTest = 0; 

// Show the slide with the index of curTest (this changes later) 
$("div#testimonial-"+curTest).show(); 

// On click of any LI 
$("ul#testimonial-list li").click(function() { 

    // If it's not the current index of curTest. 
    // This is to make sure nothing happens when you click the one already selected. 
    if($(this).index() != curTest) { 

     // Remove the current class off of every item to be safe, then add to current index. 
     $(this).siblings().removeClass("current"); 
     $(this).addClass("current"); 

     // Then newCurTest should equal the new index set by the click of the LI. 
     var newCurTest = $(this).index(); 

        // AT THIS POINT HERE, IE SEEMS TO NOT TAKE AFFECT. THE DYNAMIC SELECTOR DOESN'T WORK FOR IE EVEN THOUGH IT RETURNS AN 'Object' 
     $("div#testimonial-"+curTest).hide(); 
     $("div#testimonial-"+newCurTest).show(); 
     curTest = newCurTest; 


    } 

}); 

這裏是我一起工作的HTML樣本：

<div class="testimonials"> 

<div class="testimonial-panel" id="testimonial-0"> 
    <h2>"Slide One"</h2> 
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p> 
    <blockquote> 
     <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p> 
    </blockquote> 
</div> 

<div class="testimonial-panel" id="testimonial-1"> 
    <h2>"Slide Two"</h2> 
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p> 
    <blockquote> 
     <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p> 
    </blockquote> 
</div> 

<div class="testimonial-panel" id="testimonial-2"> 
    <h2>"Slide Three"</h2> 
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p> 
    <blockquote> 
     <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p> 
    </blockquote> 
</div> 

<div class="testimonial-panel" id="testimonial-3"> 
    <h2>"Slide Four"</h2> 
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p> 
    <blockquote> 
     <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p> 
    </blockquote> 
</div> 

<div class="testimonial-panel" id="testimonial-4"> 
    <h2>"Slide Five"</h2> 
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p> 
    <blockquote> 
     <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p> 
    </blockquote> 
</div> 

<div class="testimonial-panel" id="testimonial-5"> 
    <h2>"Slide Six"</h2> 
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p> 
    <blockquote> 
     <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p> 
    </blockquote> 
</div> 

<div class="testimonial-panel" id="testimonial-6"> 
    <h2>"Slide Seven"</h2> 
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p> 
    <blockquote> 
     <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p> 
    </blockquote> 
</div> 

<div class="testimonial-panel" id="testimonial-7"> 
    <h2>"Slide Eight"</h2> 
    <p><strong>Stewart Arbuckle<br /> Surveyor<br /> Jones Lang Lasalle</strong></p> 
    <blockquote> 
     <p>"The transparency that the company provides is apparent through the number of leads we recieve on a daily basis, making it a vital marketing tool for any commercial property professional."</p> 
    </blockquote> 
</div> 

<ul id="testimonial-list"> 
    <li class="current"><img src="graphics/testimonial-bw.jpg" width="90" height="55" alt="" /></li> 
    <li><img src="graphics/testimonial-cbre.jpg" width="90" height="55" alt="" /></li> 
    <li><img src="graphics/testimonial-jll.jpg" width="90" height="55" alt="" /></li> 
    <li><img src="graphics/testimonial-canon.jpg" width="90" height="55" alt="" /></li> 
    <li><img src="graphics/testimonial-tlg.jpg" width="90" height="55" alt="" /></li> 
    <li><img src="graphics/testimonial-oxford.jpg" width="90" height="55" alt="" /></li> 
    <li><img src="graphics/testimonial-rapleys.jpg" width="90" height="55" alt="" /></li> 
    <li><img src="graphics/testimonial-nsc.jpg" width="90" height="55" alt="" /></li> 
</ul> 

正如你或許能看到，DIV的有一個動態內置數字追加到ID。

我使用jQuery根據LI的當前索引動態抓取它。

再一次，這一切都在Firefox中正常工作，所以我不確定我的代碼是否嚴格錯誤。

任何幫助將不勝感激。我一直在尋找，並嘗試幾個小時才能使這個工作。 IE似乎不想挑選隱藏/顯示的元素。

非常感謝， Michael。

Answer 1

這可能是JavaScript中的字符串連接問題 - +運算符不僅用於添加，而且用於連接字符串....我知道，不是很好。

IE可能認爲你的意思是你想要將加上curTest的值到字符串的值，而不是追加與字符串相等的字符串。

爲了測試，建選擇之外的字符串，並使用JavaScript調試器看到的是解釋什麼價值（像這樣）

var testString = "div#testimonial-" + curTest; 
$(testString).hide(); 

您可能需要使用JavaScript的toString()方法來迫使你的兩個級聯變量。

Answer 2

我認爲有一個更乾淨的方式來做到這一點。這個怎麼樣：

$('li').click(function(){ 
    var i = $('li').index(this); 
    $('.testimonial-panel').not(':eq('+i+')').hide(); 
    $('.testimonial-panel').eq(i).show(); 
}); 

看看here。

請注意，我將display:block作爲內聯樣式，以便它在頁面加載時不會閃爍;即顯示不需要的部分。你也可以把.testimonial-panel:nth-child(0) {display:block}。這適用於IE8;希望這就是你想要的。