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

【问题标题】：How to get ID of clicked element with jQuery如何使用jQuery获取点击元素的ID
【发布时间】：2011-12-11 21:37:02
【问题描述】：

我有以下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 并将其传递到该行？

提前致谢！

【问题讨论】：

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

标签： jquery jquery-cycle

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您的 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; 
});

【讨论】：

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

【解决方案3】：

首先，除非您使用 HTML5 DOCTYPE，否则您的 id 不能只有一个数字。其次，您需要删除每个 id 中的 # 或将其替换为：

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

【讨论】：

【解决方案4】：

您只需要从头开始删除哈希：

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

【讨论】：

官方规范说 ID 应该始终以大写或小写字母开头，而不是数字（或井号）。许多浏览器会允许它，但你不能指望它们。

【解决方案5】：

您的 id 将作为 #1、#2 等传递。但是，# 作为 ID 无效（CSS 选择器以 # 为 ID 前缀）。

【讨论】：