JQuery: доступ к атрибуту DOM

Question

Я загружаю PHP-скрипт текст описания в div, и у меня есть еще один скрипт (на этот раз с JQuery), чтобы развернуть этот div и показать его информацию.

Когда я хочу получить доступ к атрибуту data-text, который сохраняет текст (который имеет текст, загруженный с предыдущего 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>"); 

    }); 
}); 

Полужирная часть - это то, что терпит неудачу. Если я попытаюсь прочитать атрибут data-text с помощью alert(), он просто покажет «undefined».

Это элемент DOM, что мой PHP код генерирует:

<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

Она также может быть

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

Answer 2

попробовать просто это,

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

Answer 3

Там нет форматирования жирного шрифта в примере коды, но если вы пытаетесь получить доступ к

<img class="image" ...> 

, вам необходимо использовать следующий селектор:

$(".image") 

Это потому, что вы пытаетесь выбрать в классе «img_cont», тогда как ваш элемент img имеет класс «образ».

Чтобы получить значение "данных" текст, вам нужно будет сделать:

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

Или, если вы используете JQuery> = 1.4.3:

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

И тогда, ваш призыв к атру был неправ (дополнительные скобки), а также я изменил добавляемые к после того, чтобы вы могли видеть текст (если вы добавите тег 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>"); 

}); 
});