Replace matching image's src containing specific string with div's data attribute onto css background-image

StackOverflow https://stackoverflow.com/questions/22967166

Question

http://jsfiddle.net/awMpj/4/

Does Not Work

$(document).ready(function() {
    $('button').on("click", function() {
        var $img = $('img[src*="500"]');
        if($('img').attr('src').indexOf('place') != -1 )
            $('img[data-img="background"]').css({'background-color':'yellow','background-image':'url('+ $img +')','background-position':'center'});
    })
})

Result src ="http://fiddle.jshell.net/_display/undefined"


Does Work

$(document).ready(function() {
    $('button').on("click", function() {
        if($('img').attr('src').indexOf('place') != -1 )
            $('img[data-img="background"]').css({'background-color':'yellow','background-image':'url("http://placehold.it/500x500")','background-position':'center'});
    })
})

I am havinging difficulty calling a variable into the url portion of the .css function in JQuery. I am able to call properly the function if the URL is specified. I am hoping to have a function that I can use to search for images containing a specific string within its 'src' then apply that entire src attribute onto another image with a specific data attribute.


RESOLVED EDIT: "The src is just used to select the image. So $img is the jquery object encapsulating the img node. You still need to ask for the src attribute. – Robin"

$(document).ready(function() {
    $('button').on("click", function() {
        var $img = $('img[src*="500"]');
        if($('img').attr('src').indexOf('place') != -1 )
            $('img[data-img="background"]').css({'background-color':'yellow','background-image':'url(+ $img +)','background-position':'center'});
    })
})
Était-ce utile?

La solution

You have to quote correctly in order to interpet the $img variable ...

$(document).ready(function() {
    $('button').on("click", function() {
        var $img = $('img[src*="500"]');
        if($('img').attr('src').indexOf('place') != -1 )
            $('img[data-img="background"]')
.css({backgroundColor:'yellow',backgroundImage:'url('+ $img.attr('src')+')',backgroundPosition:'center'});
    })
})
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top