巧用img onerror事件 给div更新 class

csx

一个页面内有 多个类似的div  如：

[JavaScript] 纯文本查看 复制代码

<div class="sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/s1.png" onerror="nofind();" /></div>
<div class="sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/s2.png" onerror="nofind();" /></div>
<div class="sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/s3.png" onerror="nofind();" /></div>
<div class="sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/s4.png" onerror="nofind();" /></div>
<div class="sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/s5.png" onerror="nofind();" /></div>
<div class="sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/s6.png" onerror="nofind();" /></div>
<div class="sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/s7.png" onerror="nofind();" /></div>
<div class="sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/s8.png" onerror="nofind();" /></div>
<div class="sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/s9.png" onerror="nofind();" /></div>
<div class="sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/s10.png" onerror="nofind();" /></div>

当某些src指定的图片不存在时   将触发 onerror 事件    通过nofind方法  将指定class的div 隐藏   display：none

但存在一个问题  通过JavaScript寻找指定class的div 再更改这个div的class     因为是在同一个页面   所有符合条件的div都会被更改   都会隐藏。。。

采用如下方式；只需添加一个

[JavaScript] 纯文本查看 复制代码

<div class="sfbspic" style="text-align:center;"><img border="0" alt="" src="/image/sfbs.png" onerror="this.parentNode.className='sfbspic nosfbspic';" /></div>

[CSS] 纯文本查看 复制代码

<style type="text/css">
.nosfbspic{
display:none !important;
}
</style>

之前尝试的JavaScript代码一并贴出吧：

[JavaScript] 纯文本查看 复制代码

<script type="text/javascript">
<!--
function nofindsfbspic(){
	var div2 = document.getElementsByClassName("nosfbspic");
	var i;
    for (i=0;i<div2.length;i++ )
    {
		div2[i].style.display="none";
    } 
}
//-->
</script>
<script type="text/javascript">
<!--
function nofind(){
	var div1 = document.getElementsByClassName("sfbspic");
     //var img=event.srcElement;
    //img.src="/static/image/common/nopic.png";
    //img.onerror=null; //控制不要一直跳动
	var i;
    for (i=0;i<div1.length;i++ )
    {
		//div[i].style.display="none";
		div1[i].className="nosfbspic";
    } 
	//div.style.display = "none";
	nofindsfbspic();
}
//-->
</script>