jQuery 输出图像标题/描述不起作用？答案

【问题标题】：jQuery to output image title / description not working?jQuery 输出图像标题/描述不起作用？
【发布时间】：2018-05-20 05:16:15
【问题描述】：

我是一名新手编码员。我正在使用 Wordpress。我使用这个工作 sn-p 在图像下方显示图像标题：

<script>
  jQuery('.ce-image').find('img').after(function(){
    return jQuery('<p class="image-caption">').text(jQuery (this).attr('caption')); }
);

我还想显示图片中的标题和描述字段。但是当我将标题和描述插入 (this.attr('FIELD HERE')) 时，它不起作用。我不知道为什么。标题和描述字段中确实有数据，但似乎无法抓取。

例如，这段代码的 sn-p 不返回任何内容：

<script> jQuery('.ce-image').find('img').after(function() { return jQuery('<p class="image-caption">').text(jQuery (this).attr('title')); }); </script>

标题和描述字段的语法是否不同？使用 alt 字段对我有用，caption 有效，但 title 和 description 字段无效。我可以尝试另一种类似的方法吗？提前感谢您的帮助。

【问题讨论】：

不看html就无法回答这个问题
给我们看jsfiddle。
我给了你答案。试一试并给我反馈，以便我为您提供帮助。

标签： jquery wordpress

【解决方案1】：

试试这个标题：

<script>
 jQuery('.ce-image').find('img').after(function() {
   return jQuery('<p class="image-title">').text(jQuery (this).attr('title'));
 });
</script>

这里是描述：

<script>
 jQuery('.ce-image').find('img').after(function() {
   return jQuery('<p class="image-description">').text(jQuery (this).attr('description'));
 });
</script>

或者，对于所有这些（标题、描述和标题）：

var $ceImage = jQuery('.ce-image').find('img');
$ceImage.each(function(){
   var image_caption= $(this).attr('caption');
   var image_title = $(this).attr('title');
   var image_description = $(this).attr('description');
   $(this).after('<p class="image-title">' + image_title + '</p><p class="image-caption">' + image_caption + '</p><p class="image-description">' + image_description + '</p>');
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ce-image">
  <img src="https://placeimg.com/300/200/people" caption="Caption 1" title="Title 1" description="Description 1">
</div>
<div class="ce-image">
  <img src="https://placeimg.com/300/200/people" caption="Caption 2" title="Title 2" description="Description 2">
</div>

【讨论】：

【解决方案2】：

或者您可以将标题放在图片上方：

var $ceImage = jQuery('.ce-image').find('img');
$ceImage.each(function(){
   var image_caption= $(this).attr('caption');
   var image_title = $(this).attr('title');
   var image_description = $(this).attr('description');
   $(this).before('<p class="image-title">' + image_title + '</p>');
   $(this).after('<p class="image-caption">' + image_caption + '</p><p class="image-description">' + image_description + '</p>');
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ce-image">
  <img src="https://placeimg.com/300/200/people" caption="Caption 1" title="Title 1" description="Description 1">
</div>
<div class="ce-image">
  <img src="https://placeimg.com/300/200/people" caption="Caption 2" title="Title 2" description="Description 2">
</div>

【讨论】：