Question

我正在尝试在更大的图像中使用图像的来源，而问题在于它只是说它未被定义。这是我的代码，我提前感谢您的帮助。

修改的看起来代码在代码片段中运行得很好，但是当我打开索引文件时不会在这里;（我不知道为什么会发生这种情况...停下来！D：，当我用自己的索引检查元素时.html文件，它表示源等于未定义

＆＃13;

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');
  });
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

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

尝试在$(document).ready()

中移动它

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

    ...

});

Answer 2

感谢其中一条评论，我想出来了，我只需要在文档内部使用var.ready函数：D

无法获得图像来源

2 个答案: