无法获取图像的来源

我想要获取图像的来源以便在更大的图像中使用，问题在于它只是说它在未定义时是未定义的。这是我的代码，我很感激提前的帮助。无法获取图像的来源

编辑它出现在代码完美的作品中的代码片段而不是在这里当我打开索引文件;！（我不知道为什么会这样... HALP我d :,也，当我检查我自己的index.html文件中的元素，它说，源等于未定义

var src = $('.button').attr('src'); 
 
$(document).ready(function() { 
 
    $('.button').click(function() { 
 
    $('.backdrop').animate({ 
 
     'opacity': '.5' 
 
    }, 300, 'linear'); 
 
    $('.box').animate({ 
 
     'opacity': '1.00' 
 
    }, 300, 'linear'); 
 
    $('.box, .backdrop').css('display', 'block'); 
 
    $('.box').html('<img class="boximg" src="' + src + '">'); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $('.backdrop').click(function() { 
 
    close_box(); 
 
    }); 
 

 
    $('.close').click(function() { 
 
    close_box(); 
 
    }); 
 
}); 
 

 
function close_box() { 
 
    $('.backdrop, .box').animate({ 
 
    'opacity': '0' 
 
    }, 300, 'linear', function() { 
 
    $('.backdrop, .box').css('display', 'none'); 
 
    }); 
 
}

.backdrop { 
 
    position: absolute; 
 
    display: none; 
 
    top: 0px; 
 
    left: 0px; 
 
    background-color: #000; 
 
    opacity: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.box { 
 
    position: absolute; 
 
    display: none; 
 
    background-color: white; 
 
    opacity: 0; 
 
    top: 10%; 
 
    left: 10%; 
 
    width: 80%; 
 
    height: 80%; 
 
    border-radius: 13px; 
 
} 
 
.close { 
 
    float: right; 
 
    margin-right: 5px; 
 
} 
 
.boximg { 
 
    position: absolute; 
 
    top: 3%; 
 
    left: 2%; 
 
    width: 96%; 
 
    height: 94%; 
 
} 
 
.button { 
 
    border-radius: 30px; 
 
    height: 300px; 
 
    width: 300px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
    <script type="text/javascript" src="javascript.js"></script> 
 
</head> 
 

 
<body> 
 
    <img class="button" src="http://www.hdbackgroundpoint.com/wp-content/uploads/2013/10/13/urlttr.jpeg"> 
 
    <div class="backdrop"></div> 
 
    <div class="box"> 
 

 
    </div> 
 
</body> 
 

 
</html>

来源

2014-10-26 user3910313

你会需要弄清楚小提琴和真实代码之间的不同之处。如果不能看到有什么不同，潜在的回答者将会很困难。 – 2014-10-26 17:11:27

交换这两个语句！ 'var src = $（'。button'）。attr（'src'）; $（document）.ready（function（）{' - 在页面加载之前，图像不存在 – mplungjan 2014-10-26 17:18:20

您设置var src = $('.button').attr('src'); DOM加载之前，因此没有定义。

尝试内$(document).ready()

$(document).ready(function() { 
    var src = $('.button').attr('src'); 

    ... 

});

来源

2014-10-26 17:19:40

由于移动它来一个评论，我想通了，我不得不拥有的document.ready函数内使用var：d

来源

2014-10-26 17:21:03 user3910313

无法获取图像的来源

回答

相关问题