Question

I have a navigation menu that is built in PHP such that the current location has a different image so the user knows where they are.

In the function, I have these HTML attributes outputted:

To set the td id:

$menu_output .= '<tr><td id="nav_buttons">';

And to set the img id and user-defined img data-id:

$menu_output .= '" id="alt" data-id="yes';

The function also has this bit:

...
if ($current_page == $key) {
    $menu_output .= $image_dir . $ds . $page_nav_alt[$key];
    $menu_output .= '" id="alt" data-id="yes';
}

else {
    $menu_output .= $image_dir . $ds . $page_nav[$key];
}

$menu_output .= '" border="0" height="19" width="129"></a></td>';

to set the current page to yes for tagging it.

I basically give it two arrays of links and images and the current page has a highlighted image. This menu seems to work fine and I’ve been using it for a while.

Recently I have wanted to change it so that in addition to this functionality, I get hover over effects with jQuery. My thinking was that how hard could it be? Well, it has been more difficult than I imagined. By no means am I an expert on JavaScript or jQuery, so I’m not surprised I’m screwing this up.

Here is the jQuery I’m working with that isn’t giving the expected results:

$(document).ready(function() {

    var test = $('#alt').attr('data-id');

    if (test != 'yes'){
        $('#nav_buttons img').hover(function() {
            this.src = this.src.replace('_dark', '_light');
        },
        function() {
            this.src = this.src.replace('_light', '_dark');
        });
    }

    else {
        $('#nav_buttons img').hover(function() {
            this.src = this.src.replace('_light', '_dark');
        },
        function() {
            this.src = this.src.replace('_dark', '_light');
        });
    }
});

This seems to work for the if part but the else branch doesn’t do what I thought it should. It changes the link to light and then the hover changes it to dark on over and then light on out.

When I inspect the elements with Firefox, the classes ids and attributes are what I set, eg, the highlighted link is set to yes and the others not set. It seems everything is working except the else branch. What am I missing?

EDIT

I looked into the page source when the home page was current, thinking it would be “_dark” because it looks like the dark image, but yet the source says it’s the “_light” image. But when I inspect the element with Firefox, it tells me it’s the “_dark” image with the alt attributes. I believe that the PHP is writing the data to the page (server derived), as expected, and jQuery is acting on it (changing the DOM), as expected, but I cannot get them to play correctly. I think I need to somehow set the image with jQuery after the hover event so that it looks like it’s supposed to. How do I get these to function like I want?

EDIT 2

I think I see why the .attr() and .data() jQuery methods aren’t working. The docs say that these work with the first element in the collection. Or am I misunderstanding that? So basically, even though the PHP writes the element how I want it, in the right place and with the right value, when I inspect the element, I get different values. This seems to block the hover/replace from working correctly.

I tried this variation that is a bit simpler:

var test = $('img').data('id');

And I test for test to be equal to alt which I now tell PHP to place right after the img tag. But for some reason when I alert the test variable, Im still getting undefined. Presumably because the order of the img tag attributes.

How to PHP developers get around this and make PHP and jQuery play nice together? Seems like these kinds of conficts would be all over in PHP sites that use jQuery.

Answer 1

Custom HTML attributes only really came in with HTML5 so you might get a few extra problems with data-id attribute.

I’d suggest adding a class to the img addClass(). You can then test if an element has that class by using hasClass().

$menu_output .= '" id="alt" class="data-id-yes"';

And then you would do something like

$(document).ready(function() {
$('#nav_buttons img').hover(function() {
    if($(this).hasClass('data-id-yes')
    {
        this.src = this.src.replace('_dark', '_light');
    } else {
        this.src = this.src.replace('_light', '_dark');
    }
},
function() {
    if($(this).hasClass('data-id-yes')
    {
        this.src = this.src.replace('_light', '_dark');
    } else {
        this.src = this.src.replace('_dark', '_light');
    }
});
});