2016-11-18 5 views
-2

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を入力します。

そして、ここで説明するための図である。 enter image description here

+1

私はこの質問を理解していませんが、確かにこれに「alt」属性を使用しないでください。 「alt」属性は、画像を見ることができないユーザのための画像のテキスト記述を提供するためのアクセシビリティ機能である。 – idbentley

答えて

0

を使用すると、パフォーマンスが向上し、一貫性のためdata-attributes使用することができますあなたの目標を達成するために。 jQueryを使用して比較したいものをdata-*属性に格納し、それをあなたの方法で使用してください。

+0

ありがとうございます。これは私のための戦いの一部かもしれません。私はオリジナルの質問を少しはっきりさせました。あなたがそんな気がするなら、他の助けに感謝します。再度、感謝します! – user3765693

関連する問題