リンク切れの画像の自動差し替え(imgタグ以外)

リンク切れの画像をjsで自動で差し替えるようにしているのですが、
jQueryのflexsliderのサムネがimgタグでないためここだけ動きません。

<li data-thumb="images/aaaa.jpg">

この部分にも
自動差し替えを適用させることは可能なのでしょうか？

↓現状こうなっています。

<div class="flexslider">
<ul class="slides" id="myslider">
<li data-thumb="images/aaaa.jpg"><img src="images/aaaa.jpg" alt="img" /></li>
<li data-thumb="images/bbbb.jpg"><img src="images/bbbb.jpg" alt="img" /></li>
<li data-thumb="images/cccc.jpg"><img src="images/cccc.jpg" alt="img" /></li>
</ul>
</div>

〜〜〜〜〜

<script>
$(document).ready(function() {
$('img').error(function() {
$(this).attr({
src: 'images/no-image.jpg',
alt: 'no image'
});
});
});
</script>

kei344

2016/06/08 13:24

コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答3件

ベストアンサー

Chromeではﾏｳｽ→ｸﾘｯｸで「検証」
IEでは「要素の検査」でﾅﾋﾞｹﾞｰｼｮﾝ部のﾀｸﾞが出てきます
それを見て上位のｸﾗｽを探してごにょごにょ

javascript
1 $(function(){
2  $('.flexslider').flexslider({
3   animation: "slide",
4   controlNav: "thumbnails"
5  });
6  $('.slides').find("img").error(function(){
7   $(this).attr({
8    src: 'images/no-image.jpg', 
9    alt: 'no image',
10    "":function(){
11     $(".flex-control-thumbs").find("img").eq($("img").index(this)-1).attr("src",$(this).attr("src"));
12    }
13   })
14  });
15 });

投稿2016/06/08 14:44

退会済みユーザー

総合スコア0

一応下記で動きましたが、
無理のあるソースなのであまり参考にしない方が良いかもしれないです。。

javascript
1$('[data-thumb]').each(function(e){
2	var img = new Image();
3	img.src = $(this).attr('data-thumb');
4	img.onerror = function(){
5		$thumb.eq(e).attr('data-thumb','noImg.jpg');
6	};
7});