Question

我正在尝试使用JavaScript调整图像大小。这个例子是基于一个工作的jsfiddle，但页面似乎不起作用。我假设脚本位于错误的位置，但我找不到正确的脚本。怎么说得对？

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

修改

仍然无效：

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

解

需要正确包含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>

Answer 1

问题是因为您使用on*属性附加事件处理程序，函数中的this引用不是引发事件的元素，而是window。您需要将对函数的引用作为参数传递。

另请注意，HTML中存在多个问题。首先，您可以使用closest('.images')代替链接parent()来电，imgheight属性无效。您应该使用data-*属性来存储带有元素的自定义元数据。最后，a元素必须包含href或name个引号。尽管如此，试试这个：

<div data-imgheight="300px" class="images">
    <div>
        <a href="#"> 
            <img src="http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg" onload="loadImage(this)" />
        </a>
    </div>
    <div>
        <a href="#"> 
            <img src="http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg" onload="loadImage(this)" />
        </a>
    </div>
</div>

function loadImage(el) {
    $(el).attr('height', $(el).closest('.images').data('imgheight'));
}

或者更好的方法是使用不显眼的Javascript来附加您的事件处理程序。正如您已经在使用jQuery，这是一个例子;

<script type='text/javascript'>
    $(function() {
        $('.images img').on('load', function() {
            $(this).attr('height', $(this).closest('.images').data('imgheight'));
        });
    });
</script>

<img src="http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg" />

最后请注意，data-imgheight属性将设置为最后加载的img元素的高度。如果这是您打算做的事情，那很好，虽然这有点奇怪，但是使用它。

Answer 2

如果您想从属性获取值，请将$(this).closest('.images').data('imgheight')更改为$(this).closest('.images').attr('imgheight')

＆＃13;

$.attr('get value attrb')

＆＃13;

$(function() {
        $('.images img').on('load', function() {
            console.log($(this).closest('.images').attr('imgheight'))
            $(this).attr('height', $(this).closest('.images').attr('imgheight'));
        });
    });

＆＃13;

如何让javascript执行以更新图像？

2 个答案: