Javascript（jQuery）フラッシャー効果：それを行う方法？

Question

私はフラッシャー効果を作りたいと思っています。特定のフィールドにマウスを移動すると何かが表示されます（私の場合は黄色のアイコン）。

このような似たようなフィールドがたくさんあります（将来はコメントになる）ので、私はこのすべてを1つのサイクルで実行しようとしました。しかし、それは働いていない...私は理由を知らない。

いくつかの注意：私はHTMLなしで、javascriptでのみ行う必要があるので、document.writeメソッドを使用しました。ここで

Demo on jsfiddle

コード：

var data = ['one', 'two', 'three']; 
for(var i in data){ 
    (function(){ 
     $('#id'+i).mouseover(function(){ $("#hdn"+i).show(); }); 
     $('#id'+i).mouseout(function(){ $("#hdn"+i).hide(); }); 
    }); 
    document.write('<div id="id'+i+'" style="border:1px solid;margin:10px 0;float:left;width:100%;">'); 
     document.write('<div style="float:left;width:20px;height:20px;">'+data[i]+'</div>'); 
     document.write('<div id="hdn'+i+'" style="display:none;float:right;width:20px;height:20px;"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSa7ebCG4VGWcTTXH8j7ebfpFWhYuV9ojisNmsrnZaQHk8wRMTNqGfaNA" /></div>') 
    document.write('</div>'); 
} 

ありがとう！

Answer 1

var data = ['one', 'two', 'three']; 

$.each(data,function(i,v) { 
    $('<div id="id'+i+'" style="border:1px solid;margin:10px 0;float:left;width:100%;">') 
     .append('<div style="float:left;width:20px;height:20px;">' 
       +v+'</div><div id="hdn' 
       +i+'" style="display:none;float:right;width:20px;height:20px;"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSa7ebCG4VGWcTTXH8j7ebfpFWhYuV9ojisNmsrnZaQHk8wRMTNqGfaNA" /></div>') 
     .appendTo('body') 
     .mouseover(function(){ $(this).children('[id^="hdn"]').show(); }) 
     .mouseout(function(){ $(this).children('[id^="hdn"]').hide(); }); 
}); 

Answer 2

の前にイベントハンドラを設定すると、htmlが書き出されます。それはうまくいかない。

また、JavaScriptのループの場合は、実際の値ではなく配列のインデックスを指定します。

これを行う最善の方法は、htmlのdivを設定し、このhtmlを追加してjQueryに本体を追加させることです。

var newHtml = ""; 
for(var i = 0; i < data.length; i++) { 
    newHtml += '<div id="id'+i+'" style="border:1px solid;margin:10px 0;float:left;width:100%;">'; 
     newHtml += '<div style="float:left;width:20px;height:20px;">'+data[i]+'</div>'; 
     newHtml += '<div id="hdn'+i+'" style="display:none;float:right;width:20px;height:20px;"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSa7ebCG4VGWcTTXH8j7ebfpFWhYuV9ojisNmsrnZaQHk8wRMTNqGfaNA" /></div>'; 
    newHtml += '</div>'; 
} 

var newDiv = $("<div />"); 
$("body").append(newDiv); 
$(newDiv).html(newHtml); 

for(var i = 0; i < data.length; i++) { 
    (function(){ 
     $('#id'+i).mouseover(function(){ $("#hdn"+i).show(); }); 
     $('#id'+i).mouseout(function(){ $("#hdn"+i).hide(); }); 
    }); 

Answer 3

IDの代わりにクラス名を使用すると、一度に複数の要素に影響を与えることができます。また、document.writeを使用しないで、代わりに既存の要素のinnerHTMLを更新してください。

$('#outputDIV').html("....")