Javascript JQuery：访问DOM'；s属性

我用一个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>");

    });
});

$（文档）.ready（函数（）{
//基因扩增
选择var；
$（“.img_cont”）。单击（函数（）{
if（！$（this）.hasClass（“img\u cont\u amp”））{
if（$（选定）.hasClass（“img\u cont\u amp”））{
$（选定）.removeClass（“img_cont_amp”）；
$（选定）.addClass（“img_cont”）；
}
$（此）.removeClass（“img_cont”）；
$（this.addClass（“img_cont_amp”）；
所选=$（此项）；
}否则{
$（“.ficha_texto”）.remove（）；
$（此）.removeClass（“img_cont_amp”）；
$（此）.addClass（“img_cont”）；
} * *
var text=$（this.attr（“数据文本”）；**
$（this.append（“+text+”）；
});
});

大胆的部分是失败的。如果我尝试用alert（）读取数据文本属性，它只会显示“undefined”

这是我的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>

我做错了什么？

也可能是

var text = $(this).data("text");

简单地说

  var t= $(this).attr("data-text");

---

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

<img class="image" ...>

这是因为您试图在类“img_cont”上进行选择，而您的img元素有一个类“image”

要获取“数据文本”值，您需要执行以下操作：

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

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

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

---

算了吧！我已经找到了答案

我将属性值粘贴到中，而不是JQuery代码中所指的位置，所以$（this）选择器在瞄准“数据文本”时不会得到任何东西

现在属性及其值已粘贴到容器中，因此现在可以正确访问属性

---

不过，谢谢你的回答

为了让它工作，我必须将您的类添加到代码中

<img class="image img_cont" data-text="sample description text" title="sample title" src="images/uploaded/sample_image1.jpg">

然后，您对attr的调用是错误的（额外的括号），而且我在后面更改了append to，以便您可以看到文本（如果您在img标记上追加，您将看不到任何内容）。这应该行得通

$(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>");

 });
});

$（文档）.ready（函数（）{
//基因扩增
选择var；
$（“.img_cont”）。单击（函数（）{
if（！$（this）.hasClass（“img\u cont\u amp”））{
if（$（选定）.hasClass（“img\u cont\u amp”））{
$（选定）.removeClass（“img_cont_amp”）；
$（选定）.addClass（“img_cont”）；
}
$（此）.removeClass（“img_cont”）；
$（this.addClass（“img_cont_amp”）；
所选=$（此项）；
}否则{
$（“.ficha_texto”）.remove（）；
$（此）.removeClass（“img_cont_amp”）；
$（此）.addClass（“img_cont”）；
}
var text=$（this.attr（）（“数据文本”）；
$（this.append（“+text+”）；
});
});

他还可以使用属性选择器：

$（“[data text]”）。data（“text”）

来确保他点击了正确的元素。

$(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>");

 });
});