Jquery：在.append中传递ID答案

【问题标题】：Jquery: Passing ID inside .appendJquery：在.append中传递ID
【发布时间】：2014-10-24 00:56:40
【问题描述】：

这里的新手，有一个希望足够简单的问题：

所以我有这行代码；

            $("#r"+i+"c"+j).append($("<img>", {style:"display:block; margin: 0 auto;", src: imagefile, width: cellDimension + "px", height: cellDimension + "px"}));

我需要传递“”一个ID，这样我就可以在一个单独的函数中与它进行交互。尝试了以下方法：

            $("#"+ID+"<img>",

和

            $("#r"+i+"c"+j).append($("<img>", {style:"display:block; margin: 0 auto;", src: imagefile, width: cellDimension + "px", height: cellDimension + "px"}).attr('ID'));

提前致谢

【问题讨论】：

您是否有兴趣将"#r"+i+"c"+ 值传递给新图像，或者您想给图像一个新的ID？
这一行是向 div 添加图像的循环的一部分。我需要在一个单独的函数中与这些图像进行交互，以便我可以移动它们，因此我需要一种方法来分别选择图像。添加“#r”+i+“c”+j 作为 ID 而不是任何其他名称/数字有什么好处吗？
这完全取决于你想用这些 ID 做什么。如果您希望能够选择任何特定的图像，那么一定要使用 ID。但是，您必须记住，没有两个元素显示具有相同的 ID； ID 应该是唯一的。如有必要，我建议使用 css 类和数据属性。您能否提供一个演示，以便我们更好地了解您所描述的内容。
我需要所有图像文件的 ID 的原因是因为它们是棋盘上的棋子，我需要四处移动。我在想一个可拖动/可拖动的函数可以解决问题，因此我需要能够分别选择每个图像文件（片）
这是所有文件的链接，我使用的是lab2-index.html。其余的由我们的老师提供。 drive.google.com/file/d/0Bzjvrd9sQLIcUUg1T0dzNk5pbzg/view代码中有一些外来词（英语不是我的母语）。 Bildefil = imageFile，也可以忽略任何注释文本

标签： javascript jquery function selector identity

【解决方案1】：

您可以将id 作为创建图像时传递的对象的属性传递。

$("<img>", {
    style:"display:block; margin: 0 auto;",
    src: imagefile,
    width: cellDimension + "px",
    height: cellDimension + "px",
    id: ID_HERE } // ID here - either a string variable, or string literal like "imageId"
);

演示：http://jsfiddle.net/dmpd9a64/

此外，您可以使用attr 传递一个值，如下所示：

$("<img>", {
    style:"display:block; margin: 0 auto;",
    src: imagefile,
    width: cellDimension + "px",
    height: cellDimension + "px"}
).attr('id', ID_HERE); // again, string variable or literal

演示：http://jsfiddle.net/dmpd9a64/1/

【讨论】：

非常感谢，您的回答非常有帮助！

【解决方案2】：

如果您有兴趣传递父 ID 以使其成为图像 ID 的一部分，请按以下步骤操作：

$("#r" + i + "c" + j).append( function() { 
    return $("<img>", {
        //any attributes you'd like to set, such as:
        class: 'new-image',
        'data-id': this.id,
        id: this.id + '-something' /* since IDs must be unique */ 
    };
});

【讨论】：

【解决方案3】：

你可以这样做：

    $("#r"+i+"c"+j).append($("<img id='"+yourID+"'>", {style:"display:block; margin: 0 auto;", src: imagefile, width: cellDimension + "px", height: cellDimension + "px"}));

【讨论】：

【解决方案4】：

如果我理解正确，我会这样做：

$("#r" + i + "c" + j).append($("<img>", {
    style: "display:block; margin: 0 auto;",
    src: imagefile,
    width: cellDimension + "px",
    height: cellDimension + "px",
    id: id 
}));

这是工作代码：http://jsfiddle.net/silkster/jqqLmm46/

【讨论】：