Jquery - 在li中选择img

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 -->

这是我目前正在处理的源代码.如果鼠标光标位于4个按钮之一上,则其图片将变为颜色填充的图标图像,顶部的横幅图像必须更改为不同的图像.是的,这是一个典型的图像滑块.

问题是我一直在使用Javascript工作,人们告诉我Jquery更好......但对于我来说,Jquery的工作方式在经过一堆教程之后仍然非常混乱: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.


                });                     
            });

我需要你的帮助,大师:'(

Answer 1

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

骨料,

$('.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
});

另一种可以实现目标的方法

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