0

オーバーレイ プラグインを使用しており、foreach ループ内の各「オーバーレイ」div に、最も近い画像の alt 属性を設定したいと考えています。

ここに私が現在持っているコードがあります:

<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ヘルパーを誤解させたかのように感じますが、解決策を見つけました。データ オーバーレイ div をデータ スライド 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 に答える