jQuery获取点击链接的ID答案

【问题标题】：jQuery getting ID of clicked linkjQuery获取点击链接的ID
【发布时间】：2012-11-28 09:25:55
【问题描述】：

我在 jQuery 中有一个模态框，我创建它来显示一些嵌入代码。 我希望脚本采用被点击链接的id，但我似乎无法正常工作。

有谁知道我该怎么做或为什么会发生这种情况？

我的 jQuery 代码是：

function generateCode() {
    var answerid = $('.openembed').attr('id');
    if($('#embed input[name="comments"]:checked').length > 0 == true) {
        var comments = "&comments=1";
    } else {
        var comments = "";
    }
    $("#embedcode").html('<code>&lt;iframe src="embed.php?answerid=' + answerid + comments + '" width="550" height="' + $('#embed input[name="size"]').val() + '" frameborder="0"&gt;&lt;/iframe&gt;</code>');
}

$(document).ready(function () {
    $('.openembed').click(function () {
        generateCode();
        var answerid = $('.openembed').attr('id');
        $('#box').show();
        return false;
    });
    $('#embed').click(function (e) {
        e.stopPropagation()
    });
    $(document).click(function () {
        $('#box').hide()
    });
});

我的标记是：

<a href="#" id="7830" class="openembed">Embed</a>
<a href="#" id="9999" class="openembed">Embed</a>

【问题讨论】：

在 document.ready() 中将这一行：var answerid = $('.openembed').attr('id'); 更改为 var answerid = $(this).attr('id');，然后应该可以工作了。

标签： javascript jquery html

【解决方案1】：

你的问题在这里：

$('.openembed')

返回匹配元素的数组。您应该只选择单击的元素。如果您将 click 事件分配给具有此类的所有元素，$('.openembed') 将正常工作。但另一方面，您无法知道点击了哪个。

但幸运的是，在处理函数体中点击你可以调用$(this)。

$(this) 将返回当前（和点击的元素）。

// var answerid = $('.openembed').attr('id'); // Wrong
var answerid = $(this).attr('id');   // Correct
// Now you can call generateCode
generateCode(answerid);

另一个错误是generateCode 函数的主体。在这里，您应该传递所选元素的 id。这是正确的实现。

function generateCode(answerid) {
    if($('#embed input[name="comments"]:checked').length > 0 == true) {
        var comments = "&comments=1";
    } else {
         var comments = "";
    }
    $("#embedcode").html('<iframe src="embed.php?answerid=' + answerid + comments + '" width="550" height="' + $('#embed input[name="size"]').val() + '"frameborder="0"></iframe>');
}

在这里，我以正确的行为实现了您的代码：http://jsfiddle.net/pSZZF/2/

【讨论】：

在单击事件的函数处理程序主体中，您应该删除 $('.openembed').attr('id'); 并使用 $(this).attr('id');
你应该在var answerid = $(this).attr('id');之后移动generateCode
抱歉，我不确定您现在有什么问题。
如果我们切换聊天可能会更好。
非常感谢并 +1。你让我开心:)

【解决方案2】：

点击正确的锚点时获取 id 并将其传递给您的 generateCode 函数

$('.openembed').click(function () {
    var answerid = $(this).attr('id');
    generateCode(answerid)

    $('#box').show();
    return false;
});

改变你的功能

function generateCode(answerid) {
  // dont need this line anymore
  // var answerid = $('.openembed').attr('id');

【讨论】：

【解决方案3】：

其他答案正在尝试修复 click() 函数，但您的问题实际上与 generateCode 函数有关。

您需要将点击的元素传递给 generateCode 函数：

$('.openembed').click(function () {
    generateCode(this);

并修改generateCode：

function generateCode(element) {
    var answerid = element.id;

当然，点击代码中的var answerid = $('.openembed').attr('id'); 也不正确，但它似乎并没有做任何事情。

【讨论】：

【解决方案4】：

您需要引用$(this)，而不是引用class，它将获取该类的所有成员，以便在单击该链接时获得该唯一链接。

var answerid = $(this).prop('id');

【讨论】：

【解决方案5】：

var answerid = $('.openembed').attr('id');

需要

var answerid = $(this).prop('id');

【讨论】：

【解决方案6】：

 $('.openembed').click(function () {
    generateCode();
    var answerid = $(this).attr('id');
    $('#box').show();
    return false;
});

使用 $(this)。 $('.openembed') 指的是多个链接。

【讨论】：

请注意添加简短说明