以<李>使用jquery

targeting a link with a class inside of an <li> with jquery

本文关键字：使用 jquery gt lt      更新时间：2023-09-26

我有一个结构，看起来像这样。。。

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

使用JQuery，我将如何瞄准这些链接，以便在用户点击它时可以做一些事情。

感谢

编辑：也许我应该注意到，文本是不可见的，而是缩进了-9999px，背景图像就在它的位置上。我试了几个，但我没有得到我想要的警报。

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

这里有一个简单的Fiddle演示。

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

试试下面的

$('.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

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

$(".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.");
});

尝试

//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）"，以避免触发滚动条

相关文章：