使用来自不同 HTML 属性的项目填充数组

Posted 2023-03-05

【中文标题】使用来自不同 HTML 属性的项目填充数组

【英文标题】：Populating array with items from different HTML attributes

【发布时间】：2016-03-23 07:50:45

【问题描述】：

我有大约 1000 个具有相同类名和自定义属性的图像和文本区域。类名分别是 emoticon 和 emoticonlist。自定义属性分别是 emo-tag 和 emo-as​​cii。

每个图像都有它的伙伴（一个文本区域），其自定义属性中的内容完全相同。

示例：

emo-tag   = "f-x" // for images
emo-ascii = "f-x" // for textareas

其中 x 表示从 0 到 999 的数字。

我的脚本可以毫无问题地捕获图像属性和我需要的内容。当我尝试获取具有与图像一样的确切属性内容的文本区域的值时，问题就开始了。

这是我的代码：

$(function()
var json = [];

$('img').each(function()
    var emoimg  = $(this).attr("src");
    var emoalt  = $(this).attr("alt");
    var emotag  = $(this).attr("emo-tag");

    //Does not this supposed to capture the value of this specific textarea?
    var emoascii= $('.emoticonlist').attr("emo-ascii",emotag).val();

        json.push(
            id : emotag,
            name : emoalt,
            img : emoimg,
            content: emoascii       
        );

);
  var s = JSON.stringify(json);
  $("#content").after("<div>" + s + "</div>");
);

就像我说的，代码有效，但捕获并推送到数组中的 textarea 只是第一个和数组的所有项目。我怎样才能完成我想要的？

电流输出：

[
"id":"emo-0","name":"Smiley Face","img":"images/smiley-face.png","content":":)",
"id":"emo-1","name":"Big smile","img":"images/big-smile.png","content":":)",
"id":"emo-2","name":"Sad face","img":"images/sad-face.png","content":":)",
...
...
...
]

所需的输出：

[
"id":"emo-0","name":"Smiley Face","img":"images/smiley-face.png","content":":)",
"id":"emo-1","name":"Big smile","img":"images/big-smile.png","content":":D",
"id":"emo-2","name":"Sad face","img":"images/sad-face.png","content":":(",
...
...
...
]

【问题讨论】：

能否请您在编辑时使用“代码块”工具来提供有效的小提琴示例？如果不能让它工作，那么请包含足够的 html 和这样我们就可以轻松搞定。谢谢

$('.emoticonlist').attr("emo-ascii",emotag) 设置属性。它没有得到你想要的 (api.jquery.com/attr)。

【参考方案1】：

使用$('.emoticonlist').attr("emo-ascii",emotag)，您正在设置属性而不是获取属性等于emotag的元素。（http://api.jquery.com/attr/）

或许换行试试

var emoascii= $('.emoticonlist').attr("emo-ascii",emotag).val();

与

var emoascii= $('.emoticonlist[emo-ascii=' + emotag +']').val();

(https://api.jquery.com/attribute-equals-selector/)

【讨论】：

谢谢！它终于奏效了！这正是解决方案。