jQuery图像滑块标题问题，显示错误 [英] jQuery image slider caption issues, displaying wrong

问题描述

我几乎可以正常工作了，只是第一个和第二个字幕弄乱了，我不确定为什么！我玩过if语句和:visible选择器等，以了解是什么使它发生了变化，但无法理解.
您可以看到这是我意思的小提琴:jsfiddle.net/MrLuke/QSj4k/33

I've almost got it working, it's just the first and second caption that messes up and I'm not sure why! I've played with the if statement and the :visible selector etc to see what makes it change, but can't understand it.
You can see this fiddle to what I mean: jsfiddle.net/MrLuke/QSj4k/33

如果显示第一个字幕，但第二个则不显示，或者显示第三个字幕代替第二个，并显示第三个.这让我感到困惑.似乎第一和第二字幕混乱了，然后所有其他字幕都可以正确显示.

If there's a first caption it shows, but the second will not show, or it will show the 3rd caption in place of 2nd, as well as display it third. It's confusing me. It just seems that the 1st and 2nd caption mess up, and then any others after that will display correctly.

//DISPLAY OR HIDE FIRST CAPTION
var title = $('.slide:not("first")').children('img').attr('title');
if (title == "") {
    $('#slide_caption').fadeOut(); //HIDE CAPTION IF NO ALT TEXT
} else {
    $('#slide_caption').fadeIn();
    $('#slide_caption').html('<span>' + title + '</span>'); //SHOW ALT TEXT CAPTION
}

(function imageTransition() {
setTimeout(function() {
    $('.slide:visible').fadeOut("slow"); // FADE OUT VISIBLE IMAGE
    if ($('.slide:visible').next('.slide').size("slow") < 1) {
        $('.slide:first').fadeIn(); // FADE IN FIRST IMAGE    

        var title = $('.slide:visible').children('img').attr('title');
        if (title == "") {
            $('#slide_caption').fadeOut(); //HIDE CAPTION IF NO TITLE TEXT
        } else {
            $('#slide_caption').fadeIn();
            $('#slide_caption').html('<span>' + title + '</span>'); 
        }
    } else {
        $('.slide:visible').next('.slide').fadeIn("slow"); // FADE IN NEXT IMAGE 

        var title = $('.slide:visible').next('.slide').children('img').attr('title');
        if (title == "") {
            $('#slide_caption').fadeOut(); //HIDE CAPTION IF NO TITLE TEXT
        } else {
            $('#slide_caption').fadeIn();
            $('#slide_caption').html('<span>' + title + '</span>'); 
        }               

    }

    imageTransition(); //TRIGGER FUNCTION AGAIN
}, Speed); //Xms INTERVAL BEFORE FUNCTION RUNS AGAIN
})();

这是看图像是否具有标题属性，然后将其插入到span标签之间以显示标题的部分:

This is the part that looks to see if the image has a title attribute, and then inserts it between a span tag to show the caption:

var title = $('.slide:visible').children('img').attr('title');
        if (title == "") {
            $('#slide_caption').fadeOut(); //HIDE CAPTION IF NO ALT TEXT
        } else {
            $('#slide_caption').fadeIn();
            $('#slide_caption').html('<span>' + title + '</span>'); 
        }

和HTML:

<div id="slide_wrapper">

    <p id="slide_controls">
        <span id="prev-but"><img src="http://webbossuk.com/admin/JS/webboss-slider/imgs/but_prev.png" alt="Previous" /></span>
        <span id="next-but"><img src="http://webbossuk.com/admin/JS/webboss-slider/imgs/but_next.png" alt="Next" /></span>
    </p>


<div id="image-container">  

    <div class="slide">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_shop.jpg" alt="Slide 1" title="" />
    </div>

    <div class="slide">
        <a href="#">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_podcasts.jpg" alt="Slide 2" title="2" />
        </a>
    </div>

    <div class="slide">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_page_ed.jpg" alt="Slide 3" title="3" />
    </div>

    <div class="slide">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_members.jpg" alt="Slide 4" title="4" />
    </div>

    <div class="slide">
        <img class="slide_img" src="http://www.webbossuk.com/uploads/features_banner_more.jpg" alt="Slide 5" title="5" />
    </div>

    <p id="slide_caption"><span></span></p>
</div>

</div>​

我已经提到过，但是以防万一，这里是小提琴，实时示例(和问题)
谁能看到第一和第二字幕为什么不像其余字幕那样工作?

I've mentioned it already, but just in case, here's the fiddle to see a live example (and the issue)
Can anyone see why the first and second caption don't work like the rest?

推荐答案

此处

http://jsfiddle.net/QSj4k/35/

我在第一张幻灯片上添加了标题，在第二张幻灯片中，您删除了一个锚标签，并且该标签可以正常工作.我尚未将第一个字幕测试为空

I added caption to first slide, and in the 2nd slide, you had an anchor tag which I removed and it works. I have not tested first caption empty yet

首先测试一下它是否可以正常工作，您只是有了额外的锚点.由于该锚img不再是.slide的.children()(这是直属子代)，所以它不起作用

Just tested first empty it works, you just had that extra anchor. Because of that anchor img was no longer .children()(this is immediate children) of .slide so it did not work

如果您确实想要锚点，则将.children替换为.find，如下所示 http://jsfiddle.net/QSj4k/37/

If you really want the anchor then replace .children with .find like here http://jsfiddle.net/QSj4k/37/

这篇关于jQuery图像滑块标题问题，显示错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！