Question

我已经在jQuery中编写了一个基本脚本（对于经验丰富的jQuery vets来说可能相当丑陋）但它在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附加了一个动态构建的数字。

我根据LI的当前索引动态地使用jQuery抓取它。

再一次，这一切在Firefox中运行正常，所以我不确定我的代码是否严格错误。

非常感谢任何帮助。我一直在各地搜索，并试着用了几个小时才能让它发挥作用。 IE似乎不想选择要隐藏/显示的元素。

非常感谢，迈克尔。

Answer 1

这可能是JavaScript中字符串连接的问题 - +运算符不仅用于添加，而且用于连接字符串....我知道，不是很好。

IE可能认为您的意思是要将<{1}}的值添加到字符串的值中，而不是将chatacter等效项附加到字符串的末尾。

要测试，在选择器之外构建字符串并使用javascript调试器来查看解释的值（如下所示）

curTest

您可能希望使用JavaScript的var testString = "div#testimonial-" + curTest; $(testString).hide();方法强制连接两个变量。

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;希望这就是你所寻找的一切。

jQuery选择器无法在IE中工作

2 个答案: