Question

如何使用变量和字符串来简化这个

      $('#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

假设您每页只使用一次，您可以确保文件名与<h4/>文本相关：

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

但是，如果您希望循环遍历不同父容器中的多个不同<h4/>，则可以运行每个循环：

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

如果你的某些标题有空格或特殊字符，我建议使用正则表达式：

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

OR

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

就个人而言，如果您打算在多个<h4/>父容器上执行此操作，我会将文本小写：

$('#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

jquery如何使用变量和字符串来简化这一过程

2 个答案: