JQuery - выбор 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 -->

Это мой исходный код, над которым я сейчас работаю. Если курсор мыши находится на одной из четырех кнопок, то его изображение меняется на цветное изображение значка, а изображение баннера сверху должно меняться на что-то другое. Да, это типичный слайдер изображения.JQuery - выбор img in li

Проблема Я работаю над ним с 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 = $ (this) .attr ("value"); switch (image_num) { case "1": $ (' # banner_img '). attr ('src', 'banner-pic1.png'); break; case "2": $ ('# banner_img'). attr ('src', 'banner-pic2.png'); break; case «3»: $ ('# banner_img'). Attr ('src', 'banner-pic3.png'); break; case "4": $ ('# banner_img'). Attr ('src', ' banner_pic4.png '); break; } Вот как я это сделал. Кажется, что я работаю. Я изменил некоторые из 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 li") должен быть «кэширован», но для удобочитаемости кода я пропустил этот бит. – strah

Thx для вашей идеи тоже! : D Было очень интересно видеть другой способ приближения! – Raccoon

JQuery - выбор img in li

ответ

Смежные вопросы