Question

我有以下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-color”属性交换（我想淡出旧的att并淡化新的）

我的jquery不太顺利:(

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

关于我做错了什么的任何想法？此外，它是否有可能基本上淡出一张图像并以我在这里尝试的方式淡入另一张图像？

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);
});

Answer 2

我非常肯定

上的“这个”

$(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

Answer 3

这个答案不使用JS我真的觉得你应该只使用CSS滑动门代替这种技术。你徘徊在一个链接上 - 我认为它是菜单的一部分 - 以这种格式加载图像只会导致浏览器在加载图像时挂起一秒钟。

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

Answer 4

将此.data-color替换为$（this）.attr（'data-color'），我认为应该可行。此外，您必须备份原始src以在悬停后将其恢复。

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();
 });
});

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);
    });
});

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为valid html name attribute，但却将其括在引号中

使用jquery使用父元素的属性设置子元素attr

7 个答案: