Селектор 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 имеет динамически построенный номер, добавленный к идентификатору.

Я динамическизахватите это с помощью jQuery на основе текущего индекса LI.

Еще раз, все это прекрасно работает в Firefox, поэтому я не уверен, что мой код строго неверен.

Любая помощь будетс благодарностью.Я искал везде и часами пытался заставить это работать.Кажется, IE не хочет подбирать элементы, чтобы скрыть / показать.

Большое спасибо, Майкл.

Answer 1

Я думаю, что есть более чистый способ сделать это.Как насчет этого:

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

Проверьте это здесь .

Обратите внимание, что я поместил display:block как встроенный стиль, чтобы он не мерцал навсе по мере загрузки страницы;т.е. показать нежелательные разделы.Вы также можете поставить .testimonial-panel:nth-child(0) {display:block}.Это работает в IE8;надеюсь, это все, что вы искали.

Answer 2

Это может быть проблемой с конкатенацией строк в JavaScript - оператор + используется не только для сложения, но и для конкатенации строк .... Я знаю, не очень хорошо.

IE может подумать, что вы хотите добавить значение curTest к значению строки, вместо того, чтобы добавить эквивалентный chatacter конец строки.

Чтобы проверить, создайте строку вне селектора и используйте отладчик javascript, чтобы увидеть, какое значение интерпретируется (как это)

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

Возможно, вы захотите использовать метод JavaScript toString() для принудительного объединения двух переменных.