Bild klicken Ausblendung wird nicht geladen das nächste Bild

Ich versuche, eine Rückruffunktion zu schreiben, die das nächste Bild nach dem Ausblenden der alten ausblenden. Aber es scheint, als könnte ich das Bild ausblenden, aber ich verblasse nur das alte Bild statt des neuen. Ich denke, das erste $ ("# image") wird das alte sein, aber ich weiß nicht, warum es immer noch das alte Bild ist, nachdem ich seinen Attr zurückgesetzt habe. Das Gleiche passiert auch in der Überschrift.Bild klicken Ausblendung wird nicht geladen das nächste Bild

Das ist mein Js

$(document).ready(function() { 
    // set up event handlers for links  
    $("#image_list a").click(function(evt) { 
     $("#image").fadeOut(1000, 
     function(){ 
      var imageURL = $(this).attr("href"); 
      $("#image").attr("src", imageURL).fadeIn(1000); 
     }); 
     $("#caption").fadeOut(1000, 
     function(){ 
      var caption = $(this).attr("title"); 
      $("#caption").text(caption).fadeIn(1000); 
     }); 

     //var imageURL = $(this).attr("href"); 
     //$("#image").attr("src", imageURL); 
     //$("#image").fadeIn(1000); 
     //var caption = $(this).attr("title"); 

     //$("#caption").text(caption); 
     //$("#caption").fadeIn(1000); 
     // cancel the default action of the link 
     evt.preventDefault(); 
    }); // end click 

    // move focus to first thumbnail 
    $("li:first-child a").focus(); 
}); // end ready

Das ist mein .html

<body> 
    <main> 
     <h1>Ram Tap Combined Test</h1> 
     <ul id="image_list"> 
      <li><a href="images/h1.jpg" title="James Allison: 1-1"> 
       <img src="thumbnails/t1.jpg" alt=""></a></li> 
      <li><a href="images/h2.jpg" title="James Allison: 1-2"> 
       <img src="thumbnails/t2.jpg" alt=""></a></li> 
      <li><a href="images/h3.jpg" title="James Allison: 1-3"> 
       <img src="thumbnails/t3.jpg" alt=""></a></li> 
      <li><a href="images/h4.jpg" title="James Allison: 1-4"> 
       <img src="thumbnails/t4.jpg" alt=""></a></li> 
      <li><a href="images/h5.jpg" title="James Allison: 1-5"> 
       <img src="thumbnails/t5.jpg" alt=""></a></li> 
      <li><a href="images/h6.jpg" title="James Allison: 1-6"> 
       <img src="thumbnails/t6.jpg" alt=""></a></li> 
     </ul> 
     <h2 id="caption">James Allison: 1-1</h2>    
     <p><img src="images/h1.jpg" alt="" id="image"></p> 
    </main> 
</body> 
</html>

Quelle

2017-10-12 Z.Chen

Es ist ein Problem mit this, beachten Sie that als Ersatz von this

$("#image_list a").click(function(evt) { 
    // Here this is element of #image_list a 
    var that = this; 
    $("#image").fadeOut(1000, function(){ 
     // Here this is element of #image 
     var imageURL = $(that).attr("href"); 
     $("#image").attr("src", imageURL).fadeIn(1000); 
    }); 
    $("#caption").fadeOut(1000, function(){ 
     // Here this is element of #image 
     var caption = $(that).attr("title"); 
     $("#caption").text(caption).fadeIn(1000); 
    }); 

    //var imageURL = $(this).attr("href"); 
    //$("#image").attr("src", imageURL); 
    //$("#image").fadeIn(1000); 
    //var caption = $(this).attr("title"); 

    //$("#caption").text(caption); 
    //$("#caption").fadeIn(1000); 
    // cancel the default action of the link 
    evt.preventDefault(); 
}); // end click

Quelle

2017-10-12 02:32:47 leaf

es funktioniert! Danke für Ihre Hilfe. –

Froh, dass es helfen könnte. – leaf

Bild klicken Ausblendung wird nicht geladen das nächste Bild

Antwort

Verwandte Themen