Display image from recordset - correct code

http://stackoverflow.com/questions/20713466/img-src-or-data-imgsrc-coldfusion

by iknowkungfoo

HTML

<div id="div1">
    <h2>Display Image</h2>
</div>

<!-- Each Button's ID is comprised of the value of Image_ID from your query in order to create unique DOM IDs. -->
<button id="account_1" data-image-id="1">Linked In</button>
<button id="account_2" data-image-id="2">Facebook</button>
<button id="account_3" data-image-id="3">Twitter</button>

JavaScript

$(document).ready(function(){
    var _img = [];
    _img.push({'id': 1, 'src': 'http://iknowkungfoo.com/static/icons/32/linkedin.png'});
    _img.push({'id': 2, 'src': 'http://iknowkungfoo.com/static/icons/32/facebook.png'});
    _img.push({'id': 3, 'src': 'http://iknowkungfoo.com/static/icons/32/twitter.png'});
    console.log(_img);
    
    $("button").on('click', function(){
        var _id = $(this).data('image-id');
        console.log('Image ID: ' + _id + '.');
        // Find the corrosponding object in the _img array.
        var result = $.grep(_img, function(e){ return e.id === _id });
        // If only one is found, then reference the image src from the matching object.
        if (result.length === 1) {
            console.log(result[0].src);
            $("#div1").html('<img src="' + result[0].src + '">');
        } else {
            // If none or more than one are found, show a warning.
            console.warn('Could not find image ' + _id + '.');
        }
    });
   
});