Question

我的结构看起来像这样......

<ul class="flex-direction-nav">
   <li>
    <a class="prev" href="#">Previous</a>
   </li>
   <li>
    <a class="next" href="#">Next</a>
  </li>

使用JQuery，我如何定位这些链接，以便在用户点击它时可以执行某些操作。

由于

编辑：也许我应该注意到文本不可见，而是缩进-9999px并且背景图像在它的位置。我尝试了其中几个，但我没有得到我正在寻找的警报。

Answer 1

$('.flex-direction-nav a').on('click', function(){
    // A link was clicked
})

A simple Fiddle demo here.

Answer 2

$('.flex-direction-nav').find('a').click(function(){
    // Do something
});

Answer 3

尝试以下，

$('.flex-direction-nav li a').click (function () {
    if ($(this).hasClass('prev')) {
        //do prev
        alert('prev clicked');
    } else if ($(this).hasClass('next')) {
        //do next
        alert('next clicked');
    }
});

DEMO

Answer 4

$(".flex-direction-nav .prev").click(function(){
    //do stuff for prev button here
});
$(".flex-direction-nav .next").click(function(){
    //do stuff for next button here
});

Answer 5

$(".prev").click(function() {
  alert("You clicked prev!");
});


$(".next").click(function() {
  alert("You clicked next!");
});

...

当然还是：

$(".flex-direction-nav a").click(function() {
   alert("You clicked a link in the navigation ul.");
});

Answer 6

尝试

//first link
$("ul.flex-direction-nav a.prev").click(function(e){
//code to be executed
});

//second link
$("ul.flex-direction-nav a.next").click(function(e){
//code to be executed
});

其中“e”参数是事件对象http://api.jquery.com/category/events/event-object/ 我建议将href值格式“＃”替换为“javascript：void（0）”，以避免触发滚动条

使用jquery </li>定位与<li>内的类的链接

6 个答案: