0

我有一些使用 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 所示），而是直接将描述和标题添加到元素的“数据”属性中，准备好获取通过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 回答
2

是的，你可以.. 使用 html5 数据属性

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

并使用 jquery 获取它data()

  ...
 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
 ....
于 2013-08-30T12:52:49.360 回答