0

Пытаюсь сделать смену фона через jquery с помощью переменной:

var bbb = $(this).closest('.colTwo').find('.productData').text();

//Winter Dress

$(this).closest('.productItem').children('.colOne').css({
        backgroundImage : 'url(../image/' + bbb + '.png);'
});

Не срабатывает хотя путь по DOM дереву верный. Когда захожу в браузер то он не ругается на то что картинка не найдена, а строка со стилем не добавлена.

В чём может быть проблема?

4
  • Попробуйте написать .css({ 'background-image' : 'url(../image/' + bbb + '.png);'}); 12 фев 2020 в 9:50
  • @humster_spb спасибо попробовал. Но работает только при условии что склеивание строк будет происходить вне кода css().
    – Cobret
    12 фев 2020 в 10:44
  • А что значит "вне кода"? У Вас сейчас склеивание происходит как раз в коде css(). CbIPoK2513 показал ниже как это работает. 12 фев 2020 в 10:52
  • @humster_spb Я имел ввиду что если написать такой код bbb = 'url("./image/' + bbb + 'Green' + '.png")'; console.log(bbb); $(this).closest('.productItem').children('.colOne').css({ 'background-image' : bbb }); Всё работает в отличии от варианта когда это делается внутри функции .css(), то бишь вне кода ( за скобками )
    – Cobret
    12 фев 2020 в 10:57

1 ответ 1

0

backgroundImage не работает. Прописывайте 'background-image'

let bbb = 'https://i.imgur.com/Le4SNI2.png';

$('.two').css('background-image', `url(${bbb})`);
$('.one').css(backgroudImage, `url(${bbb})`);
.test {
  display: inline-block;
  background: red center center / cover;
  width: 100px;
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test one"></div>
<div class="test two"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.