Question

我尝试使用html的data-text属性为文本分配文本，然后使用jQuery从该图像中提取文本，使用它来改变其他地方的span元素。 data-text有用吗？它似乎不适用于我的代码。还有其他选择吗？

这是jQuery代码：

var target = $(".flex-active-slide img").attr("data-text");
$("#video_box_label").html(target);

以下是带有data-text属性的html：

<li id="Abijah_Ayele_slide">
    <img id="Abijah_Ayele_image" src="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Abijah_Ayele.jpg" data-text="Abijah_Ayele">    
</li>
<li id="slide2">
    <img id="slide_image_2" src="https://epwork.ep.corp/wg/ProdPayroll/Images_People/Adil_Saleem.jpg" data-text="Adil_Saleem">
</li>

Answer 1

data-text不是具有任何特殊功能的属性。以data-前缀开头的属性是自定义属性w3schools says。您可以使用jQuery .data() function来操纵此属性。

Answer 2

您可以将data-添加到许多代码中，包括<img>

它可以是data-部分之后的任何文字（在您的情况下，您使用的是“文字”，但它可以分别为data-othertext或data-thirdtext - 稍后可以正确引用它（见下文））。

您正在使用：<img id="slide_image_2" src="Adil_Saleem.jpg" data-text="Adil_Saleem">

在jquery中，你可以这样访问data-：

$('#slide_image_2').data('text');

把它放在一个像这样的var中：

var dataText = $('#slide_image_2').data('text');

现在dataText值为Adil_Saleem。

然后您可以根据需要操作数据。如果您要将其添加为<span>的html，则可能如下所示：

HTML：<span id="myspan"></span>

jQuery：$("#myspan").html(dataText);

Answer 3

$('img').each(function(){ 
  var $t = $(this);

  console.log($t.attr('data-text'));

  // Or if you want to append it to an element you already have 
  $('element').html($t.attr('data-text'));
}

如何在img元素中使用`data-text`属性？

3 个答案: