Изменение пути фонового url-адреса через javascript

Получение фона раздела с помощью $('section').css('background');

Результат, который я получаю в консоли, выглядит так:

rgb (13, 25, 73) url ("http://website.com/image_01_closed.jpg") прокрутка без повтора 50% 100% / содержать границу поля заполнения

Хотите знать, как изменить путь URL-адреса с _closed.jpg на _opened.jpg? Есть много разделов, поэтому хочу изменить его на любое изображение с _closed в его имени.

вы можете легко это сделать, изменив класс. создайте 2 класса: один для _closed.jpg и другой для _opened.jpg, и в зависимости от вашего условия просто переключите класс

Rajesh Kumar 11.04.2018 11:42

Будет полезно, если вы предоставите свой код html и java-скрипта.

Rajesh Kumar 11.04.2018 11:44

Хотите, чтобы мой JS работал со всеми именами изображений, поэтому простое переключение с новым путем к изображению - это не вариант. Слишком много кода для загрузки. Просто хочу знать, как я могу манипулировать полученной строкой для достижения своей цели.

All Channels 11.04.2018 11:45
1
3
46
3

Ответы 3

Вы можете попробовать вот так,

var el = document.getElementById("section_id").style.backgroundImage;
    if(el == "url(close.jpg)") { // full value is provided
       el.style.backgroundImage = "url(/link/open.png)"; // change it
}

Нашел рабочее решение с этим кодом:

var url = $('section').css('background-image');
var res = url.replace("_closed", "_opened");
$('section').css('background-image',res);

Спасибо за вашу помощь.

$(document).ready(function(){
$('#btn').click(function(){
$('div').toggleClass('close')
})
})
.open{
height: 200px;
width:200px;
background-image: url("http://s5.tinypic.com/35jbaqq_th.jpg");
background-repeat: no-repeat;
background-color: #cccccc;
background-position: center;

}
.close{
height: 200px;
width:200px;
background-image: url("http://s6.tinypic.com/vg04ft_th.jpg");
background-repeat: no-repeat;
background-color: #fff;
background-position: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='btn'>change BG</button>
<br/>
<br/>
<div class='open'>
Content
</div>
<br/>
<div class='open'>
Content
</div>

Другие вопросы по теме