JQuery - choosing img in li

Question

JQuery - choosing img in li

 <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 working on now. If the mouse cursor is on one of the four buttons, then its image changes to a color image of the icon, and the image of the banner on top should change to something else. Yes, this is a typical image slider.

The problem is that I worked on this using Javascript, and people told me that JQuery is better ... but for me, how Jquery works is still very confusing after going through a 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, Guru: '(

+3

jquery

Raccoon May 14, '12 at 9:28

source share

2 answers

$(".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 
}

+2

strah May 14 '12 at 9:37

source share

The system restart · Accepted Answer · 2012-05-14T09:30:34+0000

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

Cumulative,

$('.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 to achieve the goal:

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

JQuery - choosing img in li

More articles: