Question

我很困惑如何将title属性从“img”元素添加到“a”元素中。请问，有谁可以帮助我？

HTML：

<div id="product" class="productbox">
<a href="..."><img src="blablabla" title="12345"></a>
<a href="..."><img src="blablabla" title="qwerty"></a>
<a href="..."><img src="blablabla" title="rabbit"></a>
<a href="..."><img src="blablabla" title="kirby"></a>
<a href="..."><img src="blablabla" title="dragon"></a>
</div>

jQuery：

function title_image(){   
var img_title = $(".productbox a img").attr("title");
$(".productbox a").attr("title",img_title);
}
$(document).ready(function(){
title_image();
});

代码结果：

<div id="product">
<a title="12345" href="..."><img src="blablabla" title="12345"></a>
<a title="12345" href="..."><img src="blablabla" title="qwerty"></a>
<a title="12345" href="..."><img src="blablabla" title="rabbit"></a>
<a title="12345" href="..."><img src="blablabla" title="kirby"></a>
<a title="12345" href="..."><img src="blablabla" title="dragon"></a>
</div>

我想要这样的结果：

<div id="product">
<a title="12345" href="..."><img src="blablabla" title="12345"></a>
<a title="qwerty" href="..."><img src="blablabla" title="qwerty"></a>
<a title="rabbit" href="..."><img src="blablabla" title="rabbit"></a>
<a title="kirby" href="..."><img src="blablabla" title="kirby"></a>
<a title="dragon" href="..."><img src="blablabla" title="dragon"></a>
</div>

这是我在jsfiddle上写的链接 CODE

由于

Answer 1

您需要遍历每个a元素，然后分配标题

function title_image() {
    $(".productbox a").attr("title", function(){
        return $(this).find('img').attr('title')
    });
}

演示：Fiddle

Answer 2

您需要遍历productbox项目。然后$（this）是对当前项目的引用，因此您可以获取图像标题并将其应用于锚点。

$(".productbox").each(function() {
  var img_title = $(this).find("img").attr("title");
  $(this).find("a").attr("title",img_title);
});

请参阅http://jsfiddle.net/4wzLZ/3/

Answer 3

你正在以这种方式覆盖每个链接的标题。

试试这个：

function title_image(){   
    $(".productbox a img").each(function(){
        $(this).parent().attr('title', $(this).attr('title'));
    }
});

循环遍历每个img并将父级的标题（a）设置为img的标题

JQUERY获取图片标题，然后放入元素

3 个答案: