javascript - JQuery:访问 DOM 的属性

Question

我正在使用 PHP 脚本在 div 上加载描述文本，并且我有另一个脚本(这次使用 JQuery)来扩展该 div 并显示其信息。

当我想访问保存文本的数据文本属性(其中包含从以前的 PHP 加载的文本)时，它什么也不显示。我有这个代码:

$(document).ready(function () {


    // Amplicación de fichas de imágenes
    var selected;

    $(".img_cont").click(function () {
        if (!$(this).hasClass("img_cont_amp")) {
            if ($(selected).hasClass("img_cont_amp")) {
                $(selected).removeClass("img_cont_amp");
                $(selected).addClass("img_cont");

            }
            $(this).removeClass("img_cont");
            $(this).addClass("img_cont_amp");
            selected = $(this);

        } else {
            $(".ficha_texto").remove();
            $(this).removeClass("img_cont_amp");
            $(this).addClass("img_cont");
        } * *
        var text = $(this).attr("data-text"); * *
        $(this).append("<div class='ficha_texto'>" + text + "</div>");

    });
});

粗体部分是失败的部分。如果我尝试使用alert()读取数据文本属性，它只会显示“未定义”。

这是我的 PHP 代码生成的 DOM 元素:

<div id="img_2" class="img_cont">

                     <img class="image" data-text="Sample text" title="Sample text" src="images/uploaded/ft_7UIC.jpg">

                 </div>

我做错了什么？

Answer 1

代码示例中没有粗体格式，但如果您尝试访问

<img class="image" ...>

阻止，那么你需要使用以下选择器:

$(".image")

这是因为您尝试选择“img_cont”类，而您的 img 元素具有“image”类。

要获取“data-text”值，您需要执行以下操作:

$(".image").attr("data-text")

或者如果您使用的是 jQuery >=1.4.3:

$(".image").data("text")