EDITEDを取得し、私は私が自動的に作成される配列をオフに基づいて、ストアの製品にリンクしたい画像を持っていますブログを持っていますShopifyによって。マッチ要素と---明確にするため</p> <p>を対応するデータ
私はjQueryとJSONについて完全に精通していませんが、これはできることでなければならないと感じています。すべてのポインタ?私はコード全体が書かれているとは思っていませんが、どんな助けも素晴らしいです。
次のように各画像は、多かれ少なかれに配置されます(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":"",
}]}
画像う:
<a href="">
<span class="title-overlay"><span>
<img alt="PRODUCT TITLE" src="/images/image.jpg">
</a>
JSON出力は次のようですブログのユーザーがaltタグ「アヴィニョン」を受け取ることができます。 jQueryはこれを認識し、JSON出力から対応するオブジェクトを "title"属性(上記と同じ)と照合して認識します。
jQueryは、JSONオブジェクトの "handle"属性を使用して<>タグの "href"属性を設定します。
jQueryは、JSONオブジェクトの「title」属性を使用して<スパン> innerHTMLを入力します。
私はこの質問を理解していませんが、確かにこれに「alt」属性を使用しないでください。 「alt」属性は、画像を見ることができないユーザのための画像のテキスト記述を提供するためのアクセシビリティ機能である。 – idbentley