Retrieving the background image URL from inline CSS using jQuery

I'm looking for a link similar to url(img/bg/06.jpg), but when using jQuery, I get a longer link like 

url("file:///D:/WORKING%20FILE/One%20Landing%20Page/version/img/bg/06.jpg")

https://i.stack.imgur.com/8WKgv.png

Below is the code snippet in question: 

<div class="box_bg">
    <div style="background-image: url(img/bg/06.jpg)" class="single_bg"></div>
    <div style="background-image: url(img/bg/07.jpg)" class="single_bg"></div
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">

<script>
    $('.box_bg .single_bg').each(function () {
        var bg_img = $(this).css('backgroundImage');
        $(this).click(function() {
            window.alert(bg_img);
        });
    });
</script>
jqueryhtmlcss

Answer №1

In case your inline css does not contain any additional properties, you can use the following script:

 $('.container_img .single_image').click(function () {
        var image_url = $(this).attr('style').replace('background-image: ','');
        alert(image_url);

  });

Check out the demo:https://jsfiddle.net/rh3uq4tf/

No need for each() when you simply want to retrieve the image URL upon clicking a specific image...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display information on a table using AJAX within the current webpage

I am encountering an issue with ajax on the same page. Below is my code: $.ajax({ type: "POST", url: "test.php", dataType: 'json', data: {}, success: function (data) { ...

javascriptjqueryajax

Assigning values from JSON data in jQuery

I'm facing an issue with a php query that outputs json containing a single value. The json data format is as follows: {"value":53}. I've been attempting to set this value as a variable in a jquery function, but have not been successful so far des ...

jqueryjson

activate a single on.click event to trigger additional actions - utilizing javascript and jQuery

My website features dynamically generated buttons that lead to specific pages. The challenge I'm facing is retrieving the automatically generated data-num value for each button and using it as a jQuery selector to redirect users to the corresponding p ...

javascriptjqueryonclick

Is tabIndex being used as a css property?

I'm trying to understand how to utilize the HTML attribute tabindex using CSS. Specifically, I want to assign tabIndex=0 to all div elements that have the className='my-checkbox'. This is my current approach: <div tabIndex="0" classNam ...

htmlcssdompropertiestabindex

Dim the entire website

I am attempting to apply a grey overlay across my entire site when a file is dragged in for upload. The drag event and activation of the grey overlay are functioning correctly, but there are specific areas where it does not work as intended. There seems t ...

htmlcss

What could be causing my hover effect to function exclusively on Chromium-based browsers and not on Firefox?

Could use some help with this code snippet .podmenu { display: flex; flex-direction: column; list-style: none; width: 10rem; margin-left: 3rem; margin-bottom: 60px; } .verze { list-style: none; flex-direction: column; ...

htmlcss

Automatically populate form fields with data from the clicked row in the HTML table when using JSP

Attempting to populate form fields using jQuery or JavaScript with row elements selected by clicking on the row. Tried a solution from Stack Overflow that didn't work as expected. I'm new to this, so please bear with me. (http://jsbin.com/rotuni/ ...

javascriptjqueryjsp

When incorporating CSS with Bootstrap, it may not always have a visible impact on the

As a newcomer to using Bootstrap, I recently created a webpage with Bootstrap3. However, I encountered an issue when trying to apply two classes to the same element, as the CSS was not being applied: Here is the HTML code snippet: <div class="col-md-4 ...

htmlcsstwitter-bootstrap

Mastering Data Transfer in jQuery: A Guide to Migrating Event Information from .on(dragstart) to

I need help with transferring information between an .on(dragstart) event and an .on(drop) event. However, when I run the code below in Chrome, I encounter an error message: 'Uncaught TypeError: Cannot read property 'test' of undefined' ...

javascripthtmljquery

What is the method for modifying the chosen color using a select option tag instead of a list?

element, I have a Vue component that features images which change color upon clicking a list item associated with that color. <div class="product__machine-info__colors"> <ul> <li v-for="(color, index) in machine.content[0] ...

javascripthtmlvue.jsinterpolation

Transform a span into a div while retaining its content and styles, ensuring compatibility with Internet Explorer

Is there a reliable JavaScript method to convert a span into a div while preserving its contents and the original classes of the span? The classes are pre-set, so hardcoding should be possible. <span class="my class"> <p class="conten ...

javascriptjqueryhtml

JQuery Ajax request functioning smoothly while native JavaScript falls short

I am currently troubleshooting two AJAX calls. One is written in native JavaScript while the other utilizes JQuery to call a PHP script. The jQuery AJAX call seems to be functioning properly, but I am encountering issues with the JavaScript version. Here i ...

javascriptphpjqueryajax

Using an AJAX post request will result in receiving an HTML element, especially when an attachment is included with Paperclip

I've created an innovative application where users can share their stories through ajax submissions and engage with other readers by commenting on the stories using ajax as well. The technology stack I'm working with includes Rails 3.0.3, ruby 1. ...

javascriptjqueryruby-on-railsajaxpaperclip

In order to comply with JSX syntax rules in Gatsby.js, it is necessary to enclose adjacent elements

I want to apologize beforehand for the code quality. Every time I attempt to insert my HTML code into the Gatsby.js project on the index.js page, I encounter this error: ERROR in ./src/components/section3.js Module build failed (from ./node_modules/gatsb ...

javascripthtmlreactjsgatsby

Introducing HTML elements into pre-existing web pages

My interest lies in the idea of injecting HTML into existing web pages for enhanced functionality. Specifically, I am exploring the concept of creating a more efficient bookmarking system. As someone new to web development, I am unsure of how to achieve th ...

javascripthtml

The placement of Bootstrap Datepicker is experiencing issues

I have integrated the Bootstrap Datepicker from Eternicode into my ASP.Net MVC website. While the functionality is working well, I am facing difficulty in positioning the datepicker modal using the orientation option mentioned in the documentation and code ...

javascriptjquerytwitter-bootstrapdatepicker

`My jquery mobile application fails to trigger the pageinit or ready events`

My website consists of 3 PHP pages: one index page and two subpages for sales and products. The index page has links to these subpages. When I click on the sales link, it is supposed to load sales data either on pageinit or document ready. However, no code ...

phpjavascriptjqueryajaxjquery-mobile

Tips for incorporating a personalized touch to your radio buttons

Is there a way to customize the appearance of radio buttons in React or HTML elements, such as the screenshot below? I want to maintain the display of the number No.01 followed by the label next to it. If you have any suggestions or solutions, please shar ...

htmlreactjsmaterial-uireact-radio-buttons

Accessing administrator account through mysqli and PHP authentication

I have been working on implementing a member login feature for my website. Everything is functioning properly for regular users, but I am encountering an issue with the admin login credentials. Despite entering the correct details, I am unable to log in as ...

phphtmlmysqliauthentication

How to use ajax to add multiple products to the cart in WooCommerce using a single add-to-cart button?

My goal is to utilize ajax in order to add multiple, distinct products to the cart with a single click of a button. The AddToCart-Button is located in SHOP before pagination. Whenever I try to add multiple products to the cart at once, the Ajax request is ...

jqueryajaxwordpresswoocommerce