Exercise - Event basics with jQuery

by Satish Kesiboyana

HTML

<div id="container">
    
    <h1>Events</h1>
    
    <div class="wrapper">
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
        <div class="item">
            <img src="http://placehold.it/50x50.png" />
        </div>
        
    </div>
    
</div>

CSS

.item{
    float:left;
    margin:0 10px 10px 0;
}

.wrapper{
    width:250px;
}

/*.item:hover img,*/
.item.hover img{
    outline:2px solid #f90;
}

JavaScript

// Event handling with jQuery
//
// Step 1
// 
// Set up event handler(s) for div.item elements so that:
// on mouseover, the "hover" class is added AND the img "src" attributed is logged to the console
// on mouseout, the "hover" class is removed
// on click, the div is hidden (hint: hide())

$("div.item").on('mouseover', function() {
    var $self = $(this);
    $self.addClass('hover');
    console.log($self.find('img').attr('src'));
});

$("div.item").on('mouseout', function() {
    $(this).removeClass('hover');
});

//$("div.item").on('click', function() {
//    $(this).hide();
//});
// Step 2
//
// All done? Did you delegate? 
// If not, set it up so that you are delgating
// event handling to the wrapper div
$("div.wrapper").on('click', "div.item", function() {
    $(this).fadeOut();
});