我使用MySQL数据库中的数据创建了一些图像。数据库中的数据是一个标题和一个描述。在用户单击图像之前，这在网站上是不可见的。然后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');
现在我的问题是：是否有任何方法可以不必在php中创建div元素（如代码块1所示），而是直接将描述和标题添加到元素的"data"属性中，以便通过javascript/jQuery获取？
您可以使用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');
(...)
}
是的，你可以。。使用html5数据属性
<img src="<?php echo $url; ?>" data-title="<?php echo $title; ?>" data-description="<?php echo $description; ?>" alt="<?php echo $title; ?>" />
并使用data() 用jquery获取
...
function handle_image_click(e) {
var title = jQuery(e.currentTarget).find('img').data('title'); //gives title
var description= jQuery(e.currentTarget).find('img').data('description'); //gives description
....