Javascript（jQuery）Flasher效果：该怎么做？

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

You're setting the event handlers before you're writing out the html. That can't work.

Also, for in loops in JavaScript give you the index of the array, not the actual value.

The best way to do this would be to set up a div for the html, add this html to it, then have jQuery add the div to your body.

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 2

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 3

If you use class names instead of IDs you can affect multiple elements in one go. Also, don't use document.write , update the innerHTML of an existing element instead.

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