-1

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)    
            };
        });
    });
Improve this question
1

2 Answers 2

Reset to default
2

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);
    });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thats exactly what i was looking for. I am currently learning javascript/jQuery, but the syntax is confusing.
@SamWarren: I suggest learning Javascript on its own first, then adding usage of the jQuery library when you're comfortable.
@SamWarren try not learning jQuery and focusing on JavaScript / DOM.
0

Alert shows you [object Object] because you are creating jQuery object from string by:

$(currValue.replace("up", "down"));

You should use currValue.replace("up", "down"); without $().

Also 

if ($("currValue:contains('up')")) {

is incorrect. This allways return true because you creating empty jQuery object from string you passed to $().

You should use:

currValue.indexOf('up') !== -1

or 

/up/.test(currValue)

to test if string contains some substring.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.