按名称/ alt标记匹配元素并获取相应的数据

Question

为澄清而编辑---

我有一个博客，我想根据Shopify创建的数据自动链接到商店产品。

当涉及到jQuery和JSON时，我并不完全精通，但我觉得这必须是可以完成的事情。有什么指针吗？我不希望编写完整的代码，但任何帮助都很棒。

每个图像将或多或少地放置如下（来自JSON输出的前数据填充）：

<a href="">
<span class="title-overlay"><span>
<img alt="PRODUCT TITLE" src="/images/image.jpg">
</a>

JSON输出如下：

{"products":[{
"id":6392068867,
"title":"Avignon",
"vendor":"FBRC 04",
"product_type":"Jackets",
"created_at":"2016-05-02T11:10:09-07:00",
"handle":"avignon",
"updated_at":"2016-10-31T11:41:25-07:00",
"published_at":"2016-01-04T15:16:00-08:00",
"template_suffix":"",
"published_scope":"global",
"tags":"",
}]}

该图片将由博客用户给出“阿维尼翁”的alt标签。 jQuery会识别这个，然后通过将它与“title”属性（如上所述）相匹配来识别JSON输出中的相应对象。

然后jQuery会填充＆lt; a＆gt;使用JSON对象中的“handle”属性标记“href”属性。

然后jQuery会填充＆lt; span＆gt; innerHTML，带有JSON对象的“title”属性。

这是一个图表来说明：

Answer 1

为了实现您的目标，您可以使用data-attributes来获得更好的性能和一致性。使用data-*属性中的jQuery存储您想要比较的内容并以您的方式使用它。