Jquery 如果alt文本为空，则抑制幻灯片标题

我正在使用一个简单的jQuery幻灯片，它使用图像标题和alt文本中的文本在图像上创建标题。它工作得很好，但是当幻灯片中的图像没有标题/alt时，我不希望它显示任何内容

请参见此处的示例代码：

我基本上需要添加一个IF语句来测试图像标题/alt是否为空，但我不知道如何做到这一点。

将javascript上的“显示标题”内容更改为：

//Display the caption
if($('#slideshow-caption p').html() != "")
    $('#slideshow-caption').css({opacity: 0.7, bottom:0});

---

享受：）

嘿，这是一个解决方案：

将此用作脚本：

<script type="text/javascript">
$(document).ready(function() {        

    //Execute the slideShow, set 4 seconds for each images
    slideShow(2000);

});

var timer;

function slideShow(speed) {


    //append a LI item to the UL list for displaying caption
    $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

    //Set the opacity of all images to 0
    $('ul.slideshow li').css({opacity: 0.0});

    //Get the first image and display it (set it to full opacity)
    $('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');

    //Get the caption of the first image from REL attribute and display it
    $('#slideshow-caption h3').html($('ul.slideshow li.show').find('img').attr('title'));
    $('#slideshow-caption p').html($('ul.slideshow li.show').find('img').attr('alt'));

    //Call the gallery function to run the slideshow    
    timer = setInterval('gallery()',speed);

    //pause the slideshow on mouse over
    $('ul.slideshow').hover(
        function () {
            clearInterval(timer);    
        },     
        function () {
            timer = setInterval('gallery()',speed);            
        }
    );

}

function gallery() {


    //if no IMGs have the show class, grab the first image
    var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

    //trying to avoid speed issue
    if(current.queue('fx').length == 0) {    

        //Get next image, if it reached the end of the slideshow, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? clearInterval(timer) :current.next()) : $('ul.slideshow li:first'));

        if (next) {    

            //Get next image caption
            var title = next.find('img').attr('title');    
            var desc = next.find('img').attr('alt');    

            //Set the fade in effect for the next image, show class has higher z-index
            next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

            //Hide the caption first, and then set and display the caption
            $('#slideshow-caption').slideToggle(300, function () {
                $('#slideshow-caption h3').html(title);
                $('#slideshow-caption p').html(desc);
                if(desc != "" || title != "")
                {
                    $('#slideshow-caption').css({opacity: 0.7, bottom:0});   
                    $('#slideshow-caption').slideToggle(500);                                         
                }
            });        

            //Hide the current image
            current.animate({opacity: 0.0}, 1000).removeClass('show');
        }
    }

}
</script>

$（文档）.ready（函数（）{
//执行幻灯片放映，为每个图像设置4秒
幻灯片放映（2000年）；
});
无功定时器；
功能幻灯片放映（速度）{
//将LI项附加到UL列表以显示标题
$（'ul.slideshow'）。追加（'li id=“slideshow caption”class=“caption”>
）；
//将所有图像的不透明度设置为0
$（'ul.slideshow li'）.css（{opacity:0.0}）；
//获取第一个图像并显示它（将其设置为完全不透明度）
$（'ul.slideshow li:first'）.css（{opacity:1.0}）.addClass（'show'）；
//从REL属性获取第一幅图像的标题并显示它
$（'ul.slideshow-li.show'）.html（$（'ul.slideshow-li.show'）.find（'img'）.attr（'title'））；
$（'ul.slideshow-li.show'）.html（$（'ul.slideshow-li.show'）.find（'img'）.attr（'alt'））；
//调用gallery函数以运行幻灯片放映
计时器=设置间隔（'gallery（）'，速度）；
//将幻灯片暂停在鼠标上方
$（'ul.slideshow'）。悬停(
函数（）{
清除间隔（计时器）；
},     
函数（）{
计时器=设置间隔（'gallery（）'，速度）；
}
);
}
函数库（）{
//如果没有IMG拥有show类，则抓取第一张图像
当前变量=（$（'ul.slideshow li.show'）？$（'ul.slideshow li.show'）：$（'ul.slideshow li:first'）；
//试图避免速度问题
如果（current.queue（'fx'）.length==0）{
//获取下一个图像，如果它到达幻灯片的末尾，请将其旋转回第一个图像
var next=（（current.next（）.length）？（（current.next（）.attr（'id'）=='slideshow caption'）？clearInterval（计时器）：current.next（）：$（'ul.slideshow li:first'））；
如果（下一个）{
//获取下一个图像标题
var title=next.find（'img'）.attr（'title'）；
var desc=next.find（'img'）.attr（'alt'）；
//为下一幅图像设置淡入效果，show类具有更高的z索引
css（{opacity:0.0}）.addClass（'show'）.animate（{opacity:1.0}，1000）；
//首先隐藏标题，然后设置并显示标题
$（“#幻灯片标题”）。幻灯片切换（300，函数（）{
$（#幻灯片标题h3'）.html（标题）；
$（#幻灯片标题p'）.html（desc）；
如果（描述！=“”| |标题！=“”）
{
$（#幻灯片标题'）.css（{不透明度：0.7，底部：0}）；
$（#幻灯片标题'）。幻灯片切换（500）；
}
});        
//隐藏当前图像
animate（{opacity:0.0}，1000）.removeClass（'show'）；
}
}
}

我添加了代码，现在它不会显示其中任何一个的标题，即使它们具有title/alt属性。