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;希望这就是你想要的。