当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Set child element attr using an attribute of the parent using jquery

问题描述:

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>

and need to basically swap the img src with the parent 'a' elements "data-colour" attribute when the 'a' element is hovered over (i'd like to fade out the old att and fade in the new too)

My jquery is not going too well :(

$('ul#clients-strip li a').hover(function(){

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

});

Any ideas as to what i'm doing wrong? Also, is it even going to be possible to essentially fade out one image and fade in another in the way that i'm trying here?

网友答案:

you should do

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

If you wan't to return to the original src when leaving you could do

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);
});
网友答案:

i'm pretty sure "this" on

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

returns an object.

Try with

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

or maybe

$(this).closests('img')

or maybe

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

where 0 is the index of the object in the array returned

Check the JQuery api

网友答案:

This answer doesn't use JS I really feel like you should just be using CSS Sliding doors instead for this technique. You're hovering on a link - that I assume is part of a menu - and loading images in that format will just cause the browser to hang for a second while it loads the image.

I'd recommend a technique that is described here: http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites, basically just set a class and background sprite to the whole menu and change the background image postion on hover. This will load faster and prevent the flicker while the image loads.

网友答案:

Replace this.data-colour with $(this).attr('data-colour'), I think that should work. Also you have to backup the original src to get it back after hover.

网友答案:
$('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();
 });
});
网友答案:

This should do it, haven't tested it but the idea is there.

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

Your attribute name is not accessible e.g this.data-colour will be translated to a mathematical expression when accessing from javascript :

Therefore you should use $(this).attr('data-colour') instead of this.data-colour

Remember - dash is actually minus operator

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

Although - dash is valid html name attribute when accessing from javascript enclose it in quotes

分享给朋友:
您可能感兴趣的文章:
随机阅读: