Question

I want to make a flasher effect: when hover on some specified field there shows anything (yellow icon in my case) and when mouseout it disappeares.

The problem that there are a lot of such similar fields (they will be the comments in future) so I’ve tried to do all this in one for cycle. But it’s not working… I do not know why.

Some notes: I have to do that all without html, only in javascript, so I’ve used document.write method.

Demo on jsfiddle

Here the code:

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>');
}

Thanks!

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();   });
});