Получение фона раздела с помощью $('section').css('background');
Результат, который я получаю в консоли, выглядит так:
rgb (13, 25, 73) url ("http://website.com/image_01_closed.jpg") прокрутка без повтора 50% 100% / содержать границу поля заполнения
Хотите знать, как изменить путь URL-адреса с _closed.jpg на _opened.jpg? Есть много разделов, поэтому хочу изменить его на любое изображение с _closed в его имени.
Будет полезно, если вы предоставите свой код html и java-скрипта.
Хотите, чтобы мой JS работал со всеми именами изображений, поэтому простое переключение с новым путем к изображению - это не вариант. Слишком много кода для загрузки. Просто хочу знать, как я могу манипулировать полученной строкой для достижения своей цели.
Вы можете попробовать вот так,
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>
вы можете легко это сделать, изменив класс. создайте 2 класса: один для _closed.jpg и другой для _opened.jpg, и в зависимости от вашего условия просто переключите класс