Question

拥有alt的图像列表，我需要获取alt的内容并在其自己的图像标记之后显示在clikkable链接中。

我已经完成了这个并且我再次使用一个正常工作的简单代码，但是当它在我正在处理的网站上工作时，我在循环中遇到了一些问题，并且它始终显示第一个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

Answer 1

您只选择此代码中的第一个元素jQuery（＆＃34; .thumbs＆＃34;）;

使用类似

的内容

var thisImgAlt = imgGallery.eq(i).attr('alt');

循环内的

Answer 2

看起来像代码上的拼写错误，你引用了错误的对象，它应该在循环中thisImg：

var thisImgAlt = jQuery(thisImg).attr('alt');
var thisImgTitle = jQuery(thisImg).attr('title');

Answer 3

除了选定的答案之外，我还想指出，通过更好地利用jQuery，你可以更轻松地编写和阅读。我会告诉你我的意思然后将其分解：

＆＃13;

$(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);
		}
	})
})

＆＃13;

<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>

＆＃13;

The Rundown！

//  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!
        }
    })
})

在自己的图像后显示alt attr

3 个答案:

The Rundown！