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