代替テキストが空白の場合、スライドショーのキャプションを表示しない

Question

画像のタイトルと代替テキストのテキストを使用して、画像上にキャプションを作成する簡単なjQueryスライドショーを作成しています。素晴らしいですが、スライドショーの画像にtitle/altがないときは何も表示したくありません。 http://jsfiddle.net/qWZWJ/24/

私は基本的に画像のタイトル/ altが空白であるかどうかをテストするためにIF文を追加する必要がありますが、私はどのようにそれを行うには考えている：

は、ここではサンプルコードを参照してください。

Answer 1

変更これまであなたのjavascriptのコンテンツ "キャプションを表示"：

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

が楽しむ:)を

Answer 2

ねえsrryこれは修正です：

使用このスクリプトのように：

<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>