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


                });                     
            });

私はあなたの助けが必要です、達人:'(

4

2 に答える 2

6 
$(".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';
   });
于 2012-05-14T09:30:34.130 に答える
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 
}
于 2012-05-14T09:37:59.490 に答える