Исчезать и в изображениях из списка - PullRequest
Новая
       33

Исчезать и в изображениях из списка

0 голосов
/ 18 апреля 2019

Если возможно, я мог бы действительно помочь с домашней работой.Для моего текущего проекта нам было поручено, чтобы изображения из списка выше исчезали при нажатии.Подписи должны также исчезать и в изображениях.У меня старое изображение и подпись исчезают, но я не могу понять, как заставить новые исчезать. Код ниже: 

$(document).ready(function() {
  // preload images
  $("#image_list a").each(function() {
    var swappedImage = new Image();
    swappedImage.src = $(this).attr("href");
  });

  // set up event handlers for links    
  $("#image_list a").click(function(evt) {
    var imageURL = $(this).attr("href");
    $("#image").fadeOut('slow', function() {
      $("#image").load(function() {
        $("#image").fadeIn();
      }).attr("src", imageURL);
    });

    var caption = $(this).attr("title");
    $("#caption").fadeOut('slow', function() {
      $("#caption").load(function() {
        $("#caption").fadeIn();
      }).text(caption);
    });

    // cancel the default action of the link
    evt.preventDefault();
  }); // end click

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

1 Ответ

1 голос
/ 18 апреля 2019

Вы можете отказаться от .load() в этом сценарии, так как он, кажется, не служит цели.Это также удалено с jQuery 3.0.

Другая вещь, которую я бы предложил, это хранить повторные поиски как переменные, а не постоянно делать одни и те же поиски DOM снова и снова. 

$(document).ready(function() {
  var $image_list_a = $("#image_list_a");

  // preload images
  $image_list_a.each(function() {
    var swappedImage = new Image();
    swappedImage.src = $(this).attr("href");
  });

  // set up event handlers for links    
  $image_list_a.click(function(evt) {
    var $image = $("#image");
    var $caption = $("#caption");

    var imageURL = $(this).attr("href");
    $image.fadeOut('slow', function() {
      $image.attr("src", imageURL).fadeIn();
    });

    var caption = $(this).attr("title");
    $caption.fadeOut('slow', function() {
      $caption.text(caption).fadeIn();
    });

    // cancel the default action of the link
    evt.preventDefault();
  }); // end click

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