是否有可能將點擊事件添加到任何滑塊控件

Question

您好我正在使用我的網站中的任何滑塊，我想向控件添加一個單擊事件。 這可能嗎？當我試圖做到這一點時，我的事件沒有觸發。任何人都可以對此有所瞭解。

我點擊活動詳情

$(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處，您會看到您可以返回選項卡的任何屬性;這使用創建DOM元素的jQuery() method。

$('#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方法來綁定事件。

編輯：

在你的提琴有帶班「規範」沒有元素 - 鏈接Tab#是DIV與spec-nav類。並且以下代碼正常工作：

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

檢查updated fiddle。