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（）读取data-text属性，它只显示“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>

我做错了什么？

Answer 1

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

<img class="image" ...>

阻止，然后你需要使用以下选择器：

$(".image")

这是因为你试图在课堂上选择＆＃34; img_cont＆＃34;，而你的img元素有一个＆＃34;图像＆＃34;。

获取＆＃34;数据文本＆＃34;价值，你需要做：

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

或者，如果您使用的是jQuery＆gt; = 1.4.3：

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

Answer 2

试试这个，

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

Answer 3

它也可以是

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

Answer 4

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

我将属性值粘贴到了JQuery代码中，而不是我指向的那个，所以$（this）选择器在针对“数据文本”时不会得到任何东西。

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

感谢您的回答！

Answer 5

为了使其工作，我必须将您的类添加到代码

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

然后，你对attr的调用是错误的（额外的括号），并且我将追加更改为之后你可以看到文本（如果你附加在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>");

 });
});

JQuery：访问DOM的属性

5 个答案: