0

MySQL データベースのデータを使用して作成した画像がいくつかあります。データベース内のデータは、タイトルと説明です。これは、ユーザーが画像をクリックするまで Web サイトに表示されません。Javascript は、それを私の画像の近くではなく、別の場所にロードします。

私の問題は、このデータへのアクセスです。この構造で PHP で要素を作成します。

<div class="image-container">
    <img src="<?php echo $url; ?>" alt="<?php echo $title; ?>" />
    <div class="title" style="display: none;"><?php echo $title; ?></div>
    <div class="description" style="display: none;"><?php echo $description; ?></div>
</div>

画像がクリックされると、次のようなデータを呼び出します。

$('.image-container').click(handle_image_click);

function handle_image_click(e) {
    var title = jQuery(e.currentTarget).find('.title').html();
    var description = jQuery(e.currentTarget).find('.description').html();
    (...)
}

これは機能しますが、これが非常に「クリーン」なソリューションだとは思いません。div 要素を非表示にして、データを「保存」する必要があります。次のコードを使用して、jQuery の要素にデータを格納できることを知っています。

$('#myElement').data('someName', 'someValue');

ここで私の質問は、(コード ブロック 1 に見られるように) php で div 要素を作成する必要がなく、要素の「データ」プロパティに説明とタイトルを直接追加して、フェッチできるようにする方法はありますか? javascript/jQuery で?

4

2 に答える 2

2

data- * html5 属性を使用してデータを保存できます

<div class="image-container" data-title="<?php echo $title; ?>" data-description="<?php echo $description; ?>">
    <img src="<?php echo $url; ?>" alt="<?php echo $title; ?>" />
</div>

次にハンドラーで

$('.image-container').click(handle_image_click);

function handle_image_click(e) {
    var title = jQuery(this).data('title');
    var description = jQuery(this).data('description');
    (...)
}
于 2013-08-30T12:52:40.117 に答える