Question

I am wanting to update a css attribute using jQuery but it isnt working. Using the alerts in the code below my first alert brings up

url("file:///H:/Web/example/HTML/images/red-arrow-up.png")

but then the second alert (in the if statement) brings up

[object Object]

But what i want it to do is update the attribute and change up to down in the url. Any idea what im doing wrong?

    $(document).ready(function() {
        $( ".portlet-header" ).click(function() {
            var currValue = $(this).children(".portlet-arrow").css("background-image");
            alert (currValue)
            if ($("currValue:contains('up')"))  {
                var newValue = $(currValue.replace("up", "down"));
                alert(newValue)
                $(this).children(".portlet-arrow").css("background-image", newValue)    
            };
            if ($("currValue:contains('down')"))    {
                var newValue = $(currValue.replace("down", "up"));
                alert(newValue)
                $(this).children(".portlet-arrow").css("background-image", newValue)    
            };
        });
    });

Answer 1

This basically all comes down to going over-the-top on jQuery selector syntax without having read the documentation to find out what selectors actually do.

1. Why did you surround currValue.replace("down", "up") in $()? That looks like an attempt to create a jQuery object out of a string that contains the URL to an image. Don’t do that. Arbitrary Javascript code isn’t to be surrounded in $() for no reason.

2. Also, $("currValue:contains('down')") doesn’t do what you think. That syntax is for selecting DOM nodes based on certain criteria, not for implementing arbitrary conditional statements on strings. You just want to search within a string.

$(document).ready(function() {
    $(".portlet-header").click(function() {
        var currValue = $(this).children(".portlet-arrow").css("background-image");
        alert(currValue);
        if (currValue.indexOf('up') != -1) {
            var newValue = currValue.replace("up", "down");
            alert(newValue);
            $(this).children(".portlet-arrow").css("background-image", newValue);
        }
        if (currValue.indexOf('down') != -1) {
            var newValue = currValue.replace("down", "up");
            alert(newValue);
            $(this).children(".portlet-arrow").css("background-image", newValue);
        }
    });
});

The code can be improved further:

$(function() {
    $(".portlet-header").click(function() {

        var currValue = $(this).children(".portlet-arrow").css("background-image");
        alert(currValue);

        if (currValue.indexOf('up') != -1) {
            var newValue = currValue.replace("up", "down");
        }
        else if (currValue.indexOf('down') != -1) {
            var newValue = currValue.replace("down", "up");
        }
        else {
            return;
        }

        alert(newValue);
        $(this).children(".portlet-arrow").css("background-image", newValue);
    });
});