JQuery - изменение фонового изображения диапазона на основе числового значения

Question

Я пытаюсь изменить фоновое изображение диапазона, который имеет числовое значение, напечатанное PHP. Как я могу видеть в FireBug, код работает, но изображение не загружается, и я почти уверен, что путь правильный. Что я делаю не так?

$(function() { 
 
    var score = parseInt($('#score').text().trim()); 
 
    var color = 'red'; 
 
    if (!isNaN(score)) { 
 
     if (score >= 40) { 
 
      color = 'orange'; 
 
     } 
 
     if (score >= 60) { 
 
      backgroundimage = 'url(images/+.png)'; 
 
     } 
 
     $('#score').css('background-image', backgroundimage); 
 
    } 
 
});

<div class="nota-puntuacion"> 
 
    <span id="score"> 
 
    85 <!--Value Printed by PHP--> 
 
    </span> 
 
</div>

Answer 1

Может быть, вы хотите это:

$(function() { 
 
    changeSpanScore = function (score) { 
 
    bg = {}; 
 
    if (score > 0) 
 
     if (score < 25) { 
 
     bg.color = "#f00"; 
 
     bg.image = "images/img-1.png"; 
 
     } else if (score < 50) { 
 
     bg.color = "#0f0"; 
 
     bg.image = "images/img-2.png"; 
 
     } else if (score < 75) { 
 
     bg.color = "#00f"; 
 
     bg.image = "images/img-3.png"; 
 
     } else { 
 
     bg.color = "#fff"; 
 
     bg.image = "images/img-4.png"; 
 
     } 
 
    else { 
 
     bg.color = ""; 
 
     bg.image = ""; 
 
    } 
 
    $("#score").html(score).css({ 
 
     "background-color": bg.color, 
 
     "background-image": bg.image 
 
    }); 
 
    }; 
 
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
<p>Enter number and press Enter.</p> 
 
<input type="text" onkeyup="if (event.keyCode == 13) changeSpanScore(this.value);" /> 
 
<br /<br /><br /> 
 
<div class="nota-puntuacion"> 
 
    <span id="score"> 
 
    85 <!--Value Printed by PHP--> 
 
    </span> 
 
</div>

В вашем случае, если вы используете зарезервированные слова в ваших изображений, вам нужно URL-адрес Кодировать их, поэтому измените код на:

backgroundimage = 'url(images/%2b.png)'; 

Answer 2

знаком плюс в качестве URL интерпретируется как пространство. Вы бы URL закодировать его в %2b:

backgroundimage = 'url(images/%2b.png)';