質問よりも意見をお願いしたいのですが、製品リストなど、大量のデータを含む Web ページを作成する必要がある場合、コミュニティは何をすることを推奨しますか? 、並べ替えなど、現在の製品のデータを操作する必要がある場合-価格、タイトル、画像、リンク、およびその他の属性? あなたのプロジェクトではどのようにしていますか?
たとえば、多数の製品を含むページがあり、それぞれに価格、タイトル、説明、画像 (URL)、リンク (URL) という属性があります。ユーザーとのやり取りで使用するデータをどのように保存しますか? 個人的には、次のように各属性をタグに挿入するだけでそれを行いました。
<div class="product" data-product_id="123">
<div class="pr_title">Title</div>
<div class="pr_body">Body</div>
<div class="pr_img"><img src="http://www.www.www/img.png"></div>
<div class="pr_link"><a href="http://www.stackoverflow.com/">Buy!</a></div>
</div>
このようにして、プレゼンテーション用の html 構造を作成し、次のような方法で jQuery でデータを操作しました。
var url = $('.product').find('.pr_link').find('a').attr('href');
しかし、プロジェクトが大きくなり、各要素にさらに 10 ～ 15 個の属性が追加されると、現在の製品からのデータの取得がかなり複雑になり、コードがほとんど読めなくなりました。
同じ構造を使用することを考えましたが、次のようなオブジェクトにデータを保持します。
var products = {
1: {
title: "abc",
description: "lorem ipsum",
price: 25.19,
img: "http://www.www.www/img.png",
link: "http://www.stackoverflow.com"
}
}
css を使用したデザインに必要な要素とスタイルのみを使用して、マークアップをできるだけシンプルに保ちます。
<div class="product" data-product_id="123">
<div class="title">Title</div>
<div>Body</div>
<img src="http://www.www.www/img.png">
<a href="http://www.stackoverflow.com/">Buy!</a>
</div>
そのためonClick、製品の ID を取得し、オブジェクト「products」でクエリを実行する必要があります。
var url = products[id].title;
これは最も便利な操作方法ですが、新しいオブジェクトが必要です。
もう 1 つのアイデアは、data-次のような親 div 要素の属性にすべてのデータを保持することでした。
<div class="product" data-product_id="123" data-title="abc" data-body="Body">
しかし、私が知っている限りでは、jQuery は (ネイティブに) データ属性をうまく処理できません。
それで、あなたの提案は何ですか？共有するより良いアイデアがあるかもしれません。
PS この件に関する情報をいくつか見つけようとしましたが、うまく定式化する方法を見つけることができなかった可能性が高いため、何も見つかりませんでした。スタック交換サイトにリンクや同様の質問がある場合は、お気軽に投稿してください。前もって感謝します！