在其自己的图像之后显示 Alt 属性
display alt attr after its own image
有一个带有alt的图像列表，我需要抓取alt的内容，并在它自己的图像标签之后显示在一个可肮脏的链接中。
我已经这样做了，我用一个简单的代码再次做了，它工作正常，但是当涉及到让它在我正在处理的网站中工作时，我在循环中遇到了一些问题，它总是显示第一个alt。
也许你们中的某个人可以看到我在这里错过了什么。注意：我正在使用 Colorbox 插件在 Drupal 7 中工作。也许这很重要
这里的代码：
jQuery(document).ready(function($) {
//GALLERY COLORBOX CAPTION
var galleryContainer = jQuery('.field-items');
jQuery('.field-item').find('img').addClass( "thumbs" );
var imgGallery = jQuery(".thumbs");
for(var i = 0; i < imgGallery.length; i++){
var thisImg = jQuery(imgGallery[i]);
var thisImgIndex = thisImg.index();
console.log(thisImgIndex)
var thisImgAlt = jQuery(imgGallery).attr('alt');
var thisImgTitle = jQuery(imgGallery).attr('title');
thisImg.parent().parent().find("a")
.eq(thisImgIndex).after('<div class="alt-link"> <a href="' + thisImgTitle + ' " target="_blank" >' + thisImgAlt + ' </a></div>');
}
});
html有点混乱，但最重要的部分是：
<div class="field-items">
<div class="field-item even">
<a href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/MemoryLoss_eFlyer.jpg?itok=Md01BlUj" title=" Memory Loss 2014 Berlin (de)" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44">
<img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/MemoryLoss_eFlyer.jpg?itok=fqMdCKg7" width="200" height="200" alt="http://www.dw.de/memory-loss-sarkozys-berlin-wall-blunder/a-4878717" title=" Memory Loss 2014 Berlin (de)" class="thumbs"></a>
<div class="alt-link">
<a href=" Memory Loss 2014 Berlin (de) " target="_blank">http://www.dw.de/memory-loss-sarkozys-berlin-wall-blunder/a-4878717 </a>
</div>
</div>
<div class="field-item even"> ... </div>
<div class="field-item odd">... </div>
<div class="field-item even">...</div>
</div>
为了更好地理解，您可以检查现场：http://loungesquatt.com/drupal734/content/graphics
你只选择这个代码中的第一个元素 jQuery（".thumbs"）;
使用类似的东西
var thisImgAlt = imgGallery.eq(i).attr('alt');
循环内部
看起来像代码上的拼写错误，您引用了错误的对象，它应该在循环中thisImg：
var thisImgAlt = jQuery(thisImg).attr('alt');
var thisImgTitle = jQuery(thisImg).attr('title');
除了选定的答案，我想指出的是，你可以通过更好地利用jQuery来使编写和阅读变得更容易。我会告诉你我的意思，然后分解它：
$(function() {
$('.field-item').each(function(i) {
if ($(this).find('.alt-link').length === 0) {
var img = $(this).find('.thumbs'),
altTitle = img.attr('title'),
altTxt = img.attr('alt'),
altWrap = $('<div />', { class: 'alt-link' }).appendTo($(this)),
altAnch = $('<a />', { href: altTitle, target: '_blank', text: altTxt }).appendTo(altWrap);
}
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="field-items">
<div class="field-item even">
<a href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/MemoryLoss_eFlyer.jpg?itok=Md01BlUj" title=" Memory Loss 2014 Berlin (de)" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44"><img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/MemoryLoss_eFlyer.jpg?itok=fqMdCKg7" width="200" height="200" alt="http://www.dw.de/memory-loss-sarkozys-berlin-wall-blunder/a-4878717" title=" Memory Loss 2014 Berlin (de)" class="thumbs"></a>
<div class="alt-link"><a href=" Memory Loss 2014 Berlin (de) " target="_blank">http://www.dw.de/memory-loss-sarkozys-berlin-wall-blunder/a-4878717 </a></div>
</div>
<div class="field-item odd"><a href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/1185289_610156385697046_973181272_n.jpg?itok=Dp5hstD8" title="LoungeSquatt meets Jamed 2013 London (uk)" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44"><img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/1185289_610156385697046_973181272_n.jpg?itok=3t7j537n" width="200" height="200" alt="http://www.residentadvisor.net/event.aspx?286997" title="LoungeSquatt meets Jamed 2013 London (uk)" class="thumbs"></a></div>
<div class="field-item even"><a href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/10384207_823498361029513_2958212523424984087_n.jpg?itok=2TCttv28" title="Be Minimal at Caffe' teatro 2014 Pavia (it)" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44"><img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/10384207_823498361029513_2958212523424984087_n.jpg?itok=x-x6MMOO" width="200" height="200" alt="http://trova-eventi.it/pavia-be-preserata-special-umberto-baccolo-amp-francesco" title="Be Minimal at Caffe' teatro 2014 Pavia (it)" class="thumbs"></a></div>
<div class="field-item odd"><a href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/10676175_823027561076593_9021032205766694706_n.jpg?itok=rEeTjYRy" title="Be Minimal at Deep club 2014 Pavia (it)" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44"><img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/10676175_823027561076593_9021032205766694706_n.jpg?itok=_fqBuULz" width="200" height="200" alt="http://www.ottawalife.com/2014" title="Be Minimal at Deep club 2014 Pavia (it)" class="thumbs"></a></div>
<div class="field-item even"><a href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/1264907_607630932616258_1776086675_o.jpg?itok=3nAzU2P2" title="with Okupe 20 years B.day 2013 Bunker Torino (it)" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44"><img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/1264907_607630932616258_1776086675_o.jpg?itok=Ze_FIxtq" width="200" height="200" alt="http://www.chaishop.com/event/1811740" title="with Okupe 20 years B.day 2013 Bunker Torino (it)" class="thumbs"></a></div>
<div class="field-item odd"><a href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/971280_716718458374171_1036081942720490513_n.png?itok=mBLxPBJa" title="Streaming from Where is Jesus 2013 Berlin (de)" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44"><img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/971280_716718458374171_1036081942720490513_n.png?itok=J0YbKp-L" width="200" height="200" alt="http://play.moviestreaming.website/watch-online/jesus-people-260861.html" title="Streaming from Where is Jesus 2013 Berlin (de)" class="thumbs"></a></div>
<div class="field-item even"><a href="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_large/public/1509813_839502112762471_5772807370612527942_n.jpg?itok=2UFZDcy9" title="Phat Milano xmas ed." class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-44"><img typeof="foaf:Image" src="http://loungesquatt.com/drupal734/sites/default/files/styles/gallery_thumb/public/1509813_839502112762471_5772807370612527942_n.jpg?itok=s2BcM7b3" width="200" height="200" alt="This image didn't have an alt" title="Phat Milano xmas ed." class="thumbs"></a></div>
</div>破败！
// This is just jQuery shorthand for `jQuery(document).ready(function`
$(function() {
// Simple selector of all elements having class name `field-item`
// It made since to start at this level of selection since everything you want
// manipulated is within this wrapper element
// Also, `.each` removes all the complications of your standard for loop.
// If preformance is an issue, then the vanilla for loop may be for you,
// but it will only make a few microseconds of difference ... if that
$('.field-item').each(function(i) { // paramter `i` is the same here as the i in your vanilla for loop
// this simple if check is because my version of your html starts with one image already having an alt link
// this ensures we don't duplicate the process on that image
if ($(this).find('.alt-link').length === 0) {
// simply grab the image in our wrapper element,
// if all that is going to be is the one image,
// then you could change the selector to just `'img'`
// instead of a class name
// NOTE: you could add `[0]` to the end and get just the element (not a jquery object)
// this would allow for the latter two variables to be selected as;
// altTitle = img.title, altTxt = img.alt
var img = $(this).find('.thumbs'),
// simply making use of jQuery's attr method to get what's needed from the <image>
altTitle = img.attr('title'),
altTxt = img.attr('alt'),
// finally, create a jquery element object for our new content's wrapper
// and append (add it) to our parent `$(this)` which will be the current element in the loop having class `field-item`
altWrap = $('<div />', { class: 'alt-link' }).appendTo($(this)),
// create anchor element and append it to its parent and you're done!
altAnch = $('<a />', { href: altTitle, target: '_blank', text: altTxt }).appendTo(altWrap);
// now everything is a variable, so if you needed to do anymore work to these items, go for it!
}
})
})
相关文章：
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示，在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 显示5秒后隐藏潜水
- 画廊图像未显示
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 谷歌地图不是以HTML显示，而是在JS Fiddle上工作
- 取出图像标签alt:丢失"没有alt-id的图像标签是优选的并且不显示丢失的“;
- 在其自己的图像之后显示 Alt 属性
- 为什么Alt不显示在叠加时，点击图像
- PHP简单HTML DOM解析器不显示alt标签作为文本
- Addthis.toolbox()方法:按钮切断和Alt文本显示
- 显示另一个HTML页面上图像(alt)的文本关联
