编辑css到event.target

Question

I am trying to make background change CSS attribute to event.target and it is not working. All the commands are working except changing event.target.css

Here is the code I'm using:

$(document).ready(function() {
    $(".plusMatch").click(function(event) {

        if ($("#productImage"+event.target.id).hasClass("visible")) {
            $("#productImage"+event.target.id).css("display", "none");
            $("#productImage"+event.target.id).removeClass('visible');
            event.target.css("background", "url(minusSign.jpg)");

        } else {
            $("#productImage"+event.target.id).css("display", "block");
            $("#productImage"+event.target.id).addClass('visible');
            event.target.css("background", "url(minusSign.jpg)");
        }


    });
});

Answer 1

The first thing is that you are using JQuery in your project, so it is better for you to write $(event.target) instead of event.target if you want to use the JQuery CSS property .

Then, to change any CSS property with javascript, you have two options :

The native style property will edit the style tag on your HTML element, for example :

event.target.style.background = 'url(myPicture.jpg)';

More informations

The JQuery css property

$(event.target).css('background': 'url(myPicture.jpg)');

More informations

Both of these solutions will produce the following result :

<div style="background:url('myPicture.jpg');"></div> 

Answer 2

event.target is a DOM element, not a jQuery object.

Either make a jQuery object or use the native DOM .style API.

Answer 3

It should be $(event.target).css(...) because event.target is DOM element, not a jQuery Object. Use $ to convert to jQuery Object:

$(event.target).css("background", "url(minusSign.jpg)");

Alternatively, use .style on the regular DOM element:

event.target.style.background = "url(minusSign.jpg)";

Answer 4

You have to change this line:

event.target.css("background", "url(minusSign.jpg)");

to:

$(event.target).css("background", "url(minusSign.jpg)");