Изменение пути фонового 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
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
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>

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