jQuery Toggling an image

Question

Since im currently still learning jQuery and am new to it i need a little bit of help cause im on a short deadline... What im trying to do is swap between two images when the image is clicked it should switch to the other and vice versa... Seems like it should be simple enough but for some reason its not working as intended... Heres my code:

UPDATED CODE

html/php

<div name='contractActions' style="float: right; width: 50px;">
    <input type="hidden" id="cId" value="<?= $contractId ?>" />
    <?
    if(mysql_result($result, $i,"IsHighlighted") == 0)
    {
        $imgIsHighlighted = _IMAGES . "highlighter_on.png";
        $altIsHighlighted = "Remove Highlight";
    }
    else
    {
        $imgIsHighlighted = _IMAGES . "highlighter_off.png";
        $altIsHighlighted = "Highlight";
    }
    ?>
    <span class="link-black"><a href="#" class="highlightAction">
        <img src="<?= $imgIsHighlighted ?>" border="0" alt="<?= $altIsHighlighted ?>" /></a>
    </span>
    <span class="link-black"><a href="#" class="declineAction">
        <img src="images/decline.png" border="0" alt="Decline" /></a>
    </span>
</div>

jQuery

$(".highlightAction").click(function() {
    var element = $(this).closest("div[name='contractActions']");
    var cId = $(element).find("#cId").val();
    var field = "IsHighlighted";

    $.ajax({
        type: "POST",
        url: "ajax/contract_buttons.php",
        dataType: "text",
        data: "contractId=" + cId + "&updateField=" + field,
        async: false,
        success: function(response) {
            $(element).find("a[class='highlightAction']").children("img").toggle(function() {
                $(this).attr("src", "images/highlighter_off.png");
                $(this).attr("alt", "Remove Highlight");
            },
            function() {
                $(this).attr("src", "images/highlighter_on.png");
                $(this).attr("alt", "Highlight");
            });
        }
    });
});

The code doesnt seem to work on the initial click afterwards however it toggles between them. Its as if the toggling doesnt activate until AFTER the first click and occasionaly after the second click. Any reasons as to why this might be happening? and a solution to this issue if possible thanks in advance!!

Answer 1

Since I discussed it over chat the outcome was that well the code seems to be correct as it was working on the testing website: www.jsfiddle.net as stated by Jared Farrish. However for some reason it was giving "me" personally an issue, we couldnt find exactly why, but looked at another method of doing this as the .toggle() function seems to be slow... The other method would be through the use of classes, also instead of saving the highlight value in a DB it could be done using states which would also mean less hitting the server and DB speeding up processing time. Anyhow hope this helps if anyone comes around a similar issue...

Answer 2

$(element).children("img").toggle(function() {
    $(this).attr("src", "images/highlighter_off.png");
    $(this).attr("alt", "Remove Highlight");
},
function() {
    $(this).attr("src", "images/highlighter_on.png");
    $(this).attr("alt", "Highlight");
});

Switch the functions around.