Question

我在页面上显示240个图像的链接。用户上传真实图像。如果用户尚未上传，我试图避免显示空图像。由于冲突，jQuery对我不起作用，所以我必须用纯JavaScript来做。

图片链接：

<img class="photo240" src="http://www.example.com/i/%%GLOBAL__AuthorID%%/p/b01.jpg" onerror="imgError()">

我的JavaScript：

function imgError()
{
    alert('The image could not be loaded.');
    var _aryElm=document.getElementsByTagName('img');  //return an array with every <img> of the page
    for( x in _aryElm) {
        _elm=_aryElm[x];
        _elm.className="photo240off";
    }
}

样式photo240off等于display:none。

现在，每当图像未命中时，所有图像都会转换为样式photo240off，我只想隐藏丢失的图像。所以我的剧本出了问题。

（整个脚本效果很好，因为我收到警报）。

Answer 1

使用this获取包含错误的图片。

更改为：

onerror="imgError(this)"

然后该功能可以是：

function imgError(el) {
    alert('The image could not be loaded.');
    el.className = "photo240off";
}

Answer 2

您需要引用来自错误调用的图像，并仅针对该图像更改类。

这样的事情：

HTML

<img class="photo240" src="example.jpg" onerror="imgError(this)">

JS

function imgError(el) {
    el.className="photo240off";
}

使用JavaScript动态更改img标签中的显示样式

2 个答案: