如何使用jQuery获取被点击元素的ID

Question

I have the following html:

<a href="#" id="#1" class="pagerlink" >link</a>
<a href="#" id="#3" class="pagerlink" >link</a>
<a href="#" id="#2" class="pagerlink" >link</a>
/*etc.... */

以下是jQuery脚本：

$(document).ready(function() {
    
    var $container = $('.gallery_r').cycle({ 
        fx:     'scrollHorz', 
        speed:   500, 
        timeout: 0 
    }); 
    
    $('a.pagerlink').click(function() { 
        var id = $(this).attr('id');
        $container.cycle(id); 
        return false; 
    }); 
    
});

'pagerlink'链接控制的是jQuery Cycle幻灯片展示。如果我更改这一行：

$container.cycle(id); 

对于这个问题

$container.cycle(7); 

它可以工作（显然只导航到幻灯片编号7）。所以，我的问题是如何获取被单击链接的ID并将其传递到该行中？

- Adam

---

# 不是 [id] 中的有效字符。 - zzzzBov

Answer 1

你的ID是#1，而cycle只需要传递一个数字。在调用cycle之前，你需要删除#。

$('a.pagerlink').click(function() { 
    var id = $(this).attr('id');
    $container.cycle(id.replace('#', '')); 
    return false; 
});

此外，ID不应包含#字符，因为它是无效的（数字ID也无效）。我建议将ID更改为类似于pager_1的东西。

<a href="#" id="pager_1" class="pagerlink" >link</a>

$('a.pagerlink').click(function() { 
    var id = $(this).attr('id');
    $container.cycle(id.replace('pager_', '')); 
    return false; 
});

- gen_Eric

---

HTML5中实际上允许使用数字ID。 - mkataja

Answer 2

您只需要从开头删除井号即可：

$('a.pagerlink').click(function() { 
    var id = $(this).attr('id').substring(1);
    $container.cycle(id); 
    return false; 
}); 

- Richard Dalton

---

官方规范指出，ID应始终以大写或小写字母开头，永不为数字（或井号）。许多浏览器可以允许此类情况，但您不能期望它们这样做。 - Blazemonger

Answer 3

@Adam 只需添加一个使用 onClick="getId()" 的函数

function getId(){console.log(this.event.target.id)}

- Anurag M.

Answer 4

您的ID将通过#1、#2等传递。然而，#不被视为有效的ID（CSS选择器将ID前缀为#）。

- David Neale

Answer 5

首先，除非您使用HTML5 DOCTYPE，否则您不能仅使用数字作为ID。其次，您需要删除每个ID中的#或将其替换为以下内容：

$container.cycle(id.replace('#','')); 

- Joseph Marikle