JavaScriptを使用して画像のサイズを変更しようとしています。この例は作業中のjsfiddleに基づいていますが、ページが機能していないようです。私は間違った場所でスクリプトを推測しますが、私は正しいものを見つけることができませんでした。それを正しく置く方法?画像を更新するためにjavascriptを実行するにはどうすればいいですか?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type='text/javascript'>
function loadImage() {
$(this).attr('height', $(this).parent().parent().parent().attr('imgheight'));
}
</script>
</head>
<body>
<div imgheight="300px" class="images">
<div>
<a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " onload="loadImage()"/></a>
</div>
<div>
<a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " onload="loadImage()"/></a>
</div>
</div>
</body>
</html>
EDIT
はまだ動作しません:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type='text/javascript'>
$(function() {
$('.images div a img').on('load', function() {
$(this).attr('height', $(this).closest('.images').data('imgheight'));
});
});
</script>
</head>
<body>
<div imgheight="300px" class="images">
<div>
<a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " /></a>
</div>
<div>
<a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " /></a>
</div>
</div>
</body>
</html>
SOLUTION正しくjqueryのを含めるために必要な
。一度私が持っていた、それは正常に動作します。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.images div a img').on('load', function() {
alert($(this).closest('.images').attr('imgheight'));
$(this).attr('height', $(this).closest('.images').attr('imgheight'));
});
});
</script>
<body>
<body>
<div imgheight="300px" class="images">
<div>
<a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " /></a>
</div>
<div>
<a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg "/></a>
</div>
</div>
</body>
</body>
</html>
がloadImage()が呼び出さなっているでしょうか?また、それが働いている場所にフィドルへのリンクを貼り付けることができます –