jQuery - 从图像中获取标题并将其放在单独的标签上（每个标签）

Question

$(function () {
    var ptitle = $('div.portfolioItem div.image img').attr("title");
    $(this).each(function () {
        $('a.play').attr({
            'title': '' + ptitle + ''
        });
    });
});

嗯，这是我的代码，它可以工作，但我不太熟悉每个标签。

目前所做的就是将第一个“ptitle”应用于所有 a.play 标签。

我想要实现的是从每个图像中获取标题并将其仅应用于相关的 a.play 按钮。

这是html，如果这对理解有任何帮助的话：

<figure class="oneThird">
    <div class="portfolioItem">
        <div class="image">
            <!-- This is the image -->
            <img src="images/portfolio-item-2.jpg" alt="portfolio item" title="test2" />
            <div class="info">
                <p> Alright, go to the link Andrew propose. Download the file. 
                    You need to add it to your project. You can still have 
                    jquery.effects.core this is why this is random fill to 
                    take space.
                </p>
                <span class="base">
                    <!-- Add the img title to the <a class="play"> below -->
                    <a href="images/header-image-2.jpg" rel="prettyPhoto[portfolio]" class="play"></a>
                    <a href="#" class="view">View Project</a>
                </span>
            </div>
        </div>
    </div>
    <h3>
        <a href="#">This is a portfolio item</a>
    </h3>
    <ul class="tags">
        <li><a href="#">Web</a>, </li> 
        <li><a href="#">Print</a>, </li> 
        <li><a href="#">Design</a></li> 
    </ul> 
</figure>

总而言之，代码已经生成了a标签的所有标题，但只生成了第一个标题并将其应用于所有a标签，我需要每个标签的标题整个页面的图像应用到特定区域的 a 标签。

有什么想法吗？

Answer 1

我认为您可能正在迭代错误的元素。

听起来您可能想要迭代每个投资组合图像。
从图像中获取标题。
查找带有类图像的 div 以找到包含的播放类
然后应用该属性。

$('div.portfolioItem div.image img').each( function(idx,img) {
    var pTitle = img.title;
    $('a.play', $(img).parent('.image')).attr('title',pTitle);
});

Answer 2

$('div.portfolioItem div.image img').each(function () {
    $(this).parent().find('a.play').attr('title', $(this).attr('title'));
});

会找到你的每一张图像并迭代每一张。每次迭代都会获取父项（在本例中为 div.info）并找到其中的任何 a.play 并将该标题设置为图像标题。请注意，匹配集“a.play”上的 attr( ) 只会在第一个匹配项上运行——假设每个图像只有一个播放按钮，这样就可以了。

您可能还需要考虑为所有原始图像提供一个类，以便您可以将代码更改为以下内容：

$('img.mybutton').each(function () {
    $(this).parent().find('a.play').attr('title', $(this).attr('title'));
});

或者，您可以这样做：

$('a.play').each(function () {
    this.title = $(this).parents('div.image').find('img.mybutton').attr('title');
});

它将找到每个播放链接，然后搜索适当的图像（而不是查找图像并搜索播放链接）。同样，这假设您将“mybutton”类添加到图像中。