Можно ли добавить событие щелчка на элемент управления ползунка ничего

Question

Привет, я использую ползунок Anything на своем веб-сайте, где я хочу добавить событие click для элементов управления. Возможно ли это? когда я пытался это сделать, мое событие не запускается. Может ли кто-нибудь иметь представление об этом.

Мои нажмите детали событий

$(function(){ 
$('.thumbNav li a').click(function() { 
$(".spec li a").css('color','#fff'); 
    }); 
}); 

скрипку ссылка jsfiddle.net/Mottie/ycUB6/5340

Answer 1

Причина, по которой вы работаете, не работает, поскольку элементы управления навигацией не существуют до тех пор, пока не инициализируется AnythingSlider. Таким образом, у вас действительно есть два варианта:

1) Используйте вашу функцию в функции обратного вызова onInitialized (demo):

var tabContainers = $('div.spec-nav > div'); 
tabContainers.hide().filter(':first').show(); 

$(function() { 
    $('#slider1, #slider2, #slider3').anythingSlider({ 
     theme: 'metallic', 
     easing: 'easeInOutBack', 
     navigationFormatter: function (index, panel) { 
      return ['Slab', 'Parking Lot', 'Drive', 'Glorius Dawn', 'Bjork?', 'Traffic Circle'][index - 1]; 
     }, 

     // Callback when the plugin finished initializing 
     onInitialized: function (e, slider) { 
      $('div.spec-nav ul li a').click(function() { 
       tabContainers.hide(); 
       tabContainers.filter(this.hash).show(); 
       $('div.spec-nav ul li a').removeClass('spec-actv'); 
       $(this).addClass('spec-actv'); 
       return false; 
      }).filter(':first').click(); 
     }, 

     onSlideComplete: function (slider) { 
      // alert('Welcome to Slide #' + slider.currentPage); 
     } 
    }); 

}); 

2) Создание этой функции при создании навигационных вкладок ... Если вы посмотрите на navigationFormatter documentation вы увидите, что вы можете вернуть любые атрибуты для вкладки; это использует jQuery() method для создания элементов DOM.

$('#slider').anythingSlider({ 
    navigationFormatter : function(i, panel){ 
    return { 
     'class' : 'imatab', 
     'data-hdr' : 'Header: ' + panel.find('h2').text(), // save text from the h2 in the panel 
     'title' : 'This text will end up in a tooltip', 
     'html'  : '<a class="panel' + i + '" href="#"><span>' + ['Cat', 'Dog', 'Bear', 'Wolf', 'Horse', 'Bjork?'][index - 1] + '</span></a>', 
     'click' : function(){ alert("AHHH I've been clicked"); } 
    }; 
    } 
}); 

И если вы используете JQuery 1.8+, вы можете передавать любые методы экземпляра JQuery, как это:

$('#slider').anythingSlider({ 
    navigationFormatter : function(i, panel){ 
    return { 
     class : 'imatab', 
     on : { 
      click : function(event) { 
       // do something 
      } 
     }, 
     html : '<a class="panel' + i + '" href="#"><span>' + i + '</span></a>' 
    } 
    } 
}); 

Я не сделал демо для этого метода, но я надеюсь, что вы получите идея.

Answer 2

Вы проверили консоль JS ошибок? Вы пропустили $ перед селектором внутри обработчика событий.

И на всякий случай вы можете использовать метод live для привязки событий.

EDIT:

В вашей скрипке нет элемента с классом «спецификацией» - связывает Tab# в DIV с классом spec-nav. И следующий код работает нормально:

$('.thumbNav li a').click(function() { 
    $(".spec-nav li a").css('color','#f0f'); 
}); 

Проверьте updated fiddle.