jquery - 選擇li中的img

<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個按鈕之一上，則其圖片將變爲填充顏色的圖標圖像，而頂部的橫幅圖像必須更改爲不同的東西。是的，這是一個典型的圖像滑塊。jquery - 選擇li中的img

問題是我一直在努力使用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. 


       });      
      });

我需要你的幫助，大師：'（

來源

2012-05-14 Raccoon

$(".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-14 09:30:34

的Wooo我已經試過所有的人，所有的工作！我從你的代碼中學到了很多東西;）Thx。 – Raccoon

你介意一下，如果你可以幫助我更多的更換旗幟嗎？我的工作就可以了，但現在很慢： '（ – Raccoon

VAR IMAGE_NUM = $（本）.attr（「值」）; 開關（IMAGE_NUM）{ 「1」：$（' ＃比賽！'）。 ATTR（ 'SRC'， '旗幟pic1.png'）;打破; 情況下，「2」：$（ '＃比賽！'）ATTR（ 'SRC'， '旗幟pic2.png'）;打破; 情況「3」：$（'＃banner_img'）。attr（'src'，'banner-pic3.png'）; break; case「4」：$（'＃banner_img'）。attr（'src'，'我想修改一些html代碼以獲得這個工作任何更好的想法？ – Raccoon

$(".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-14 09:37:59 strah

$（「 btn_list李」）應該是‘緩存’，但對於代碼的可讀性我忽略此位。 – strah

Thx也適合你的想法！：D看到不同的接近方式非常有趣！ – Raccoon

jquery - 選擇li中的img

回答

相關問題