jquery wie kann ich Variablen und Strings verwenden, um diese einfachen

Question

Wie kann ich Variablen und Strings verwende diese einfachen

 $('#department_categories h4:contains("Kitchen")').parent().css('background-image', 'url("some-image.jpg'); 
     $('#department_categories h4:contains("Bathroom")').parent().css('background-image', 'url("some-image.jpg'); 
     $('#department_categories h4:contains("Decorating")').parent().css('background-image', 'url("some-image.jpg'); 
     $('#department_categories h4:contains("DIY")').parent().css('background-image', 'url("some-image.jpg'); 
     $('#department_categories h4:contains("Garden")').parent().css('background-image', 'url("some-image.jpg'); 
     $('#department_categories h4:contains("Homeware")').parent().css('background-image', 'url("some-image.jpg'); 
     $('#department_categories h4:contains("Lighting")').parent().css('background-image', 'url("some-image.jpg'); 
     $('#department_categories h4:contains("Christmas")').parent().css('background-image', 'url("some-image.jpg'); 

Answer 1

var homeObjects = ["Kitchen", "Bathroom", "Decorating","DIY","Garden","Homeware","Lighting","Christmas"]; 
var i; 
for(i=0;i<homeObjects.length;i++) 
{ 
    $('#department_categories h4:contains('+homeObjects[i]+'])').parent().css('background-image', 'url("some-image.jpg'); 
} 

Answer 2

Unter der Annahme, dass Sie nur diese pro Seite einmal verwenden zu machen, können Sie machen Sie sicher, dass der Dateiname auf dem <h4/> Text korreliert:

var backgroundImage = '/path/to/image/' + $('#department_categories h4').text() + '.jpg'; 
$('#department_categories h4').parent().css('background-image', 'url("' + backgroundImage + '")'); 

wenn Sie jedoch eine Schleife durch mehrere verschiedene <h4/> in verschiedenen übergeordneten Container zu wollen, können Sie laufen eine jede Schleife:

$('#department_categories h4').each(function() { 
    var backgroundImage = '/path/to/image/' + $(this).text() + '.jpg'; 
    $(this).parent().css('background-image', 'url("' + backgroundImage + '")'); 
}); 

Ich würde vorschlagen, einen regulären Ausdruck verwenden, wenn einige Ihrer Titel haben Leer- oder Sonderzeichen:

var backgroundImage = '/path/to/image/' + $('#department_categories h4').text().replace(/\W+/g, '-') + '.jpg'; 
$('#department_categories h4').parent().css('background-image', 'url("' + backgroundImage + '")'); 

ODER

$('#department_categories h4').each(function() { 
    var backgroundImage = '/path/to/image/' + $(this).text().replace(/\W+/g, '-') + '.jpg'; 
    $(this).parent().css('background-image', 'url("' + backgroundImage + '")'); 
}); 

Persönlich, wenn Sie gehen zu tun dies über mehrere <h4/> übergeordneten Container, würde ich den Text klein geschrieben:

$('#department_categories h4').each(function() { 
    var backgroundImage = '/path/to/image/' + $(this).text().replace(/\W+/g, '-').toLowerCase() + '.jpg'; 
    $(this).parent().css('background-image', 'url("' + backgroundImage + '")'); 
}); 

CodePen Demo