0

我正在使用一个覆盖插件，我想在我的 foreach 循环中使用最接近它的图像的 alt 属性填充每个“覆盖”div。

这是我目前的代码：

<div data-overlayer="effect:bottom">
                    <div class="portfolio_slide" data-slides="pager:on; fx:slide">
                        <?php foreach ($page->images as $image) { ?>
                            <img src="<?php echo $image->getThumb('wide'); ?>" alt="<?php echo $image->description; ?>">
                        <?php } ?>
                    </div>
                    <div class="overlay"></div>
                </div>

我的jQuery：

$(".overlay").each(function () {
    $(this).append('<p>'function() {
      return $('this').parent('img').attr('alt');
    })'</p>');
});

我试图从循环中的每个图像中获取 alt 属性并将其传递给空的覆盖 div。我会很感激任何指示。提前致谢！

编辑：这是我的 HTML 输出

div data-overlayer="effect:bottom">
                    <div class="portfolio_slide" data-slides="pager:on; fx:slide">
                                                        <img src="/pw_template/site/assets/files/1060/wide_img_0468.jpg" alt="View over Sète">
                                                        <img src="/pw_template/site/assets/files/1060/wide_montpellier.jpg" alt="Beautiful Montpellier at night">
                                                        <img src="/pw_template/site/assets/files/1060/wide_img_0762-1-1.jpeg" alt="Nina relaxing on the lawn">
                                                </div>
                    <div class="overlay"></div>
                </div>
4

3 回答 3

1

我假设您的 html 结构如下所示，

     <div data-overlayer="effect:bottom">
         <div class="portfolio_slide" data-slides="pager:on; fx:slide">
                        <img src="someImage.png" alt="Some Alt Text">
         </div>
         <div class="overlay"></div>
     </div>

那么你$.each应该如下所示，

$(".overlay").each(function () {
    var $this = $(this);
    $this.append('<p>' +  $this.parent().find('img').attr('alt') + '</p>');
});
于 2012-11-26T19:25:00.633 回答
0

缺少逗号，$('this')而不是$(this)

$(".overlay").each(function () {
    var $this = $(this);
    $(this).append(function() {
      return '<p>' + $this.closest('div').find('img').attr('alt') + '</p>'
    });
});

检查小提琴

于 2012-11-26T19:23:09.580 回答
0

我找到了解决方案，但我觉得好像我误导了那里的 jQuery 助手。我需要将 data-overlayer div 放在 data-slides div 中，这样我的图像描述就会留在循环中。

现在代码如下：

<div class="portfolio_slide" data-slides="pager:on; fx:slide">
                        <?php foreach ($page->images as $image) { ?>
                        <div data-overlayer="effect:bottom">
                            <img src="<?php echo $image->getThumb('wide'); ?>" alt="<?php echo $image->description; ?>">
                            <div class="overlay"><?php echo $image->description; ?></div>
                            </div>
                        <?php } ?>
                    </div>

不需要额外的 jQuery，虽然我想我会尝试学习更多，但我什至不知道是否可以访问和设置数组中每个项目的数据。我想一定是的。

无论如何感谢@Vega 和@Sushanth——感谢他们的帮助。

于 2012-11-27T00:39:12.587 回答