使用jQuery设置子元素属性，使用父元素的属性值

Question

I've got the following html:

<ul id="clients-strip">
    <li>
    <a href="http://example.com/case-studies/" data-colour="/images/made/assets/images/article-images/client-colour.png">
        <img src="/images/made/assets/images/article-images/client-grayscale.png" alt="Client" width="59" height="35">  
    </a>
    </li>
    </ul>

需要基本上在'a'元素悬停时，将img src与父级'a'元素的"data-colour"属性交换（我想淡出旧属性并淡入新属性）

我的jquery不太好:(

$('ul#clients-strip li a').hover(function(){
        $(this.' img').attr('src', this.data-colour);
    });

有什么想法是我做错了什么吗？另外，我尝试的方式是否能够实现将一个图像逐渐淡出并淡入另一个图像？

- bjohnb

Answer 1

你应该这样做

$('ul#clients-strip li a').hover(function(){
    //get the child image and change the src
    $('img', this).attr('src', $(this).data('colour'));
});

如果您想在离开页面时返回原始src，可以执行以下操作：

var cacheSrc;
$('ul#clients-strip li a').hover(function(){
    cacheSrc = $('img', this).attr('src');
    //get the child image and change the src
    $('img', this).attr('src', $(this).data('colour'));
},
function(){
    $('img', this).attr('src',cacheSrc);
});

- Nicola Peluchetti

---

尼古拉，你的代码很棒！你有什么想法可以让它们在每个过渡中淡出吗？ - bjohnb

@bjohnb，这要难得多，你应该有两个图像，隐藏（hide()）其中一个并淡入（fadeIn()）另一个，但你应该改变你的标记。 - Nicola Peluchetti

那就是我最初尝试的，但由于某些我无法理解的原因，所有的图片都被分组在一起。我想现在这样也可以，我会在另一天研究一下两张图片的方法！再次感谢！！ - bjohnb

Answer 2

这个答案没有使用JS，我真的觉得你应该使用CSS滑动门技术。当你悬停在一个链接上时 - 我假设它是菜单的一部分 - 加载图像会导致浏览器挂起一秒钟，而加载图像。

我建议使用这里描述的技术：http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites，基本上只需为整个菜单设置一个类和背景精灵，并在悬停时更改背景图像位置。这将加载更快并防止图像加载时的闪烁。

- mikevoermans

Answer 3

我很确定在代码中 "this" 是指

$(this.' img').attr('src', this.data-colour);

返回一个对象。

尝试使用

$(this).children('img').attr('src', this.data-colour);

或者也许

$(this).closests('img')

或者也许

$(this).children().eq(0)

其中0是返回的数组中对象的索引

请查看JQuery API

- chepe263

---

注意：.closest() 找的是祖先元素，而不是子元素。 - ezakto

Answer 4

将 this.data-colour 替换为 $(this).attr('data-colour')，我认为这样应该可以。另外，在悬停之后，您必须备份原始 src 以便恢复。

- ezakto

Answer 5

$('ul#clients-strip li a').hover(function(){
 var source = $(this).data('colour');
 var $a = $(this);
 $('img',this).toggleFade(function(){
   $a.data('colour',$(this).attr('src'));
   $(this).attr('src',source);
   $a.toggleFade();
 });
});

- DefyGravity

---

我推荐@mikevoermans的解决方案，因为data-colour img不会在页面加载时被加载到浏览器缓存中，这会导致延迟。你可以通过淡出超时来避免“挂起”。 - DefyGravity

Answer 6

这应该可以，虽然我还没有测试过，但是思路已经在那里了。

$('#clients-strip li a').hover(function(){
    var a = $(this);
    $(this).find('img').fadeOut(500, function(){
        $(this).attr('src', a.attr('data-colour')).fadeIn(500);
    });
});

- MakuraYami

Answer 7

您的属性名称不可访问，例如在 JavaScript 中访问时，this.data-colour 将被转换为数学表达式：

因此，您应该使用 $(this).attr('data-colour') 而不是 this.data-colour

请记住，- 破折号实际上是减号运算符

 $('ul#clients-strip li a').hover(function(){ 
            var toggleWith= $(this).attr('data-colour');
            $(this+' img').attr('src', toggleWith);   
        });

尽管在从JavaScript访问时- dash是有效的HTML名称属性，但请将其用引号括起来。

- sakhunzai