jQuery fade + replace issue

Question

Я совершенно новый для javasript и jQuery, и я пытаюсь сделать простой скрипт для постепенного исчезновения изображения и замены его случайным.

Следующее работает, когда следующее изображение, которое должно исчезнуть, не упоминается как «curImg». Я подумал, что, может быть, моя функция nextImg не работает, но, похоже, она готовит точную строку местоположения изображения (почему у меня есть функция предупреждения).

Везде, где вы видите мои ошибки, я буду признателен за любую помощь! Большое спасибо, и извините за код начального уровня XD.

$.fn.preload = function() { 
     this.each(function(){ 
      $('<img/>')[0].src = this; 
     }); 
    } 

    function nextImg() { 
     var curImg = "images/"; 
     var randomNumber=Math.floor(Math.random()*11) 
     curImg += randomNumber; 
     curImg += ".jpg"; 
     alert(curImg); 
     $([curImg]).preload(); 
    } 

    nextImg(); 

    $("document").ready(function() { 
     $("#umom1").animate({ 
      opacity: 0 
      }, 1900,function() { 
      $("#umom1").attr("src", curImg); 
      $("#umom1").animate({ 
       opacity: 1 
       }, 1900); 
      }); 


    }); 

Answer 1

У вас есть переменный вопрос сферы, curImg не определен в глобальной области видимости, это определенно в локальной области видимости функции, так что вы не можете получить к нему доступ из любой точки мира, кроме самой функции.

Поскольку вы использовали ключевое слово var в функции nextImg(), время жизни переменной ограничено только этой функцией.

Я предлагаю возвращение переменной curImg из nextImg(), например, так:

function nextImg() { 
    var curImg = "images/"; 
    var randomNumber = Math.floor(Math.random()*11); 
    curImg += randomNumber; 
    curImg += ".jpg"; 
    alert(curImg); 
    $([curImg]).preload(); 
    return curImg; 
} 

Ваша ready функция должна выглядеть следующим образом:

$(document).ready(function() { 
    var img = nextImg(); 
    $("#umom1").fadeOut(1900, function() { 
     $("#umom1").attr("src", img); 
     $("#umom1").fadeIn(1900); 
    }); 
});