I've been working on setting backgrounds dynamically with a jQuery script, but it seems like the .css function is not working as expected. Here's the code snippet:
$(document).ready(function () {
$(".VociMenuSportG").each(function () {
var fullHref = $(this).find('a').attr('href');
console.log(fullHref);
var pos = fullHref.indexOf("IDSport=") + 8;
console.log(pos);
var sportNum = fullHref.substr(pos, 3);
console.log(sportNum);
var imageName;
switch (sportNum.toString()) {
case '523':
imageName = "../Images/soccer_ball01.png";
break;
case '468':
imageName = "../Images/soccer_ball01.png";
break;
}
console.log(imageName);
$(this).css('background-image', 'url (' + imageName + ')');
});
});
The script loops through each item with the class "VociMenuSportG", retrieves the link path from the list item, and then sets the background image of that list item. Despite running without errors and confirming the correct path via console.logs, the background-image doesn't get set. I'm starting to question if I might be using the .css function incorrectly somehow?
EDIT
I've attempted changing the image paths to absolute paths instead of relative ones, but unfortunately, that didn't solve the issue.