Jquery - selecting img in li

Question

 <div class="banner">
        <div class="banner_wrapper">
            <div class="banner_image">
                <img class="banner_img" src="banner-pic1.png" />                        
            </div>
            <div class="banner_bottom_wrapper">
                <div class="banner_phrase">
                    <img src="banner-text.png"/>
                </div><!-- banner_phrase ENDS -->
                <div class="banner_btns">
                   <ul class="btn_list">
                       <li><img class="banner_btn" src="banner-btn-not-selected.png" /></li>
                       <li><img class="banner_btn" src="banner-btn-not-selected.png" /></li>
                       <li><img class="banner_btn" src="banner-btn-not-selected.png" /></li>
                       <li><img class="banner_btn" src="banner-btn-not-selected.png" /></li>
                   </ul>
                </div><!-- banner_btns ENDS -->
            </div><!-- banner_bottom_wrapper ENDS -->
        </div><!-- banner_btns ENDS -->
    </div><!-- banner ENDS -->

This is my source code I'm currently working on. If a mouse cursor is on one of 4 buttons then its picture changes to a color-filled icon image and banner image on the top must change to something different. Yup, it's a typical image slider.

The problem is I've been working on it with Javascript and people told me that Jquery is way better... but for me the way Jquery works is still very confusing after going through bunch of tutorials :S

            $('.banner_btn').mouseover(
                function btn_on() {
                    //Set all the btn imgs to 'off'
                    $(".btn_list li").each(function() {$('.btn_list li img').attr('src','banner-btn-not-selected.png');
                    //And set the selected button img to 'on'
                    $(this).attr('src','banner-btn-selected.png');
                    //Now......  How to know #th btn is clicked? D:  Accroding to the btn selected, I should change the banner image.


                });                     
            });

I need your help, Gurus :'(

Answer 1

$(".btn_list li").each(function() {
   $('img', this).attr('src', 'banner-btn-selected.png');
});

Aggregate,

$('.banner_btn').on('mouseover', function() {
    $(".btn_list li").each(function() {
       $('img', this).attr('src', 'banner-btn-not-selected.png'); // changes all images src to default
    });
    this.src = 'banner-btn-selected.png'; // change the hovered image src
});

Another way you can achieve you goal

 $('.banner_btn').on(
   'hover', 
   function() {
      this.src = 'banner-btn-selected.png';
   }, 
   function(){
      this.src = 'banner-btn-not-selected.png';
   });

Answer 2

$(".btn_list li").on("click", handleClick);
function handleClick(e)
{
    var ind = $.inArray(this, $(".btn_list li"));
    //ind is the zero based number of the clicked button
    //so you can change the main banner accordingly 
}