无法更改 jQuery 中 div 的背景图像

Question

I added an event in my script that attempts to set the background-image of a div when a button is clicked. However, it is not working.

Here is the code:

HTML

<div class="col-md-2 imageCard" style="float:left">
            <img class="card-img-top"
              src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg" alt="Card image cap">
</div>

<div class="card-body">
          <blockquote class="blockquote mb-0">
            <p id="quoteSample">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer" id="quoteAuthorSample">Someone famous in </footer>
          </blockquote> 
</div> 

JS

$('.imageCard').click(function(){
    var imageSRC = ($(this).children('img').attr('src'));
    console.log(imageSRC)
    $('.card-body').css("background-image", "url(" + imageSRC + ")")
})

Console.log returns: https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg

Answer 1

It's like the button element $('.imageCard') isn't ready when the script tries to set the event listener (in this case: click ).

For that, you have two options:

1. Put your script tag on the bottom of the page, that way they will load just before the HTML, so it will find the button that was already rendered.

2. Put your jquery click on a window load event, you can use like this:

    $(document).ready(function() { // Jquery click event });

   this code make sure that your javascript DOM code runs only when the document (HTML page) is rendered completely

I hope it helps!!

Answer 2

I find it out, the problem is in the concatenation assignment, the background-image CSS property can receive an URL by adding url() but this url() needs to receive a string, it works if you use it in plain js, but since you are adding this property by a function (using strings in the parameters), you need to be careful with the final return, example (you can try it on your browser console):

assign a string (link) to a variable

    var imageSRC = "https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg"

and just type that, the return will be something like

    "url(" + imageSRC + ")" // "url(https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg)"

Now, pay attention to the link inside the url() , it's not a string anymore, is just text, and url() must receive a string

You can solve this in two ways:

1. Use "url('" + imageSRC + "')" instead of "url(" + imageSRC + ")" that way you'll be putting the correct quotes on the parameter

2. Use javascript template strings (you can read more about it here: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings )

    `url("${imageSRC}")`