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

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 
}

Jquery - 在li中选择img

2 个答案: