Функция JavaScript.replace в коде jQuery не дает ожидаемых результатов

У меня есть навигационное меню, построенное на PHP таким образом, что текущее местоположение имеет другое изображение, чтобы пользователь знал, где они находятся.

В функции у меня выведены следующие атрибуты HTML:

Чтобы установить td id:

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

И установить img id и определяемые пользователем img data-id:

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

Функция также имеет этот бит:

...
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>';

Чтобы установить для текущей страницы значение "да" для ее пометки.

Я в основном даю ему два массива ссылок и изображений и на текущей странице есть выделенное изображение. Это меню, кажется, работает нормально, и я использую его уже некоторое время.

Недавно я хотел изменить его так, чтобы в дополнение к этой функции я мог наводить курсор на эффекты с помощью jQuery. Я думал о том, насколько это может быть трудно? Что ж, это оказалось сложнее, чем я себе представлял. Я ни в коем случае не являюсь экспертом по JavaScript или jQuery, поэтому я не удивлен, что все испортил.

Вот jQuery, с которым я работаю, который не предоставление ожидаемых результатов:

$(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');
        });
    }
});

Похоже, это работает для части if, но ветвь else не делает того, что я думал, что она должна. Он меняет ссылку на светлую, а затем при наведении курсора она становится темной, а затем загорается.

Когда я проверяю элементы с помощью Firefox, идентификаторы классов и атрибуты - это то, что я установил, например, выделенная ссылка имеет значение "да", а остальные не установлены. Кажется, все работает, кроме ветки else. Кто я такой пропал без вести?

РЕДАКТИРОВАТЬ

Я заглянул в источник страницы, когда домашняя страница была текущей, думая, что это будет "_dark", потому что это похоже на темное изображение, но все же источник говорит, что это изображение "_light". Но когда я проверяю элемент с помощью Firefox, он говорит мне, что это изображение "_dark" с атрибутами alt. Я считаю, что PHP записывает данные на страницу (производную от сервера), как и ожидалось, и jQuery действует на нее (изменяет DOM), как и ожидалось, но я не могу заставьте их играть правильно. Я думаю, что мне нужно каким-то образом настроить изображение с помощью jQuery после события наведения, чтобы оно выглядело так, как должно. Как мне заставить их функционировать так, как я хочу?

РЕДАКТИРОВАТЬ 2

Я думаю, что понимаю, почему методы .attr() и .data() jQuery не работают. В документах говорится, что они работают с первым элементом коллекции. Или я неправильно это понимаю? Таким образом, в принципе, даже несмотря на то, что PHP пишет элемент так, как я этого хочу, в в нужном месте и с правильным значением, когда я проверяю элемент, я получаю разные значения. Это, похоже, блокирует правильную работу наведения/замены.

Я попробовал этот вариант, который немного проще:

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

И я проверяю, чтобы test было равно alt, которое я теперь говорю PHP разместить сразу после тега img. Но по какой-то причине, когда я предупреждаю переменную test, я все еще не определен. Предположительно, из-за порядка атрибутов тега img.

Как Разработчики PHP обходят это и заставляют PHP и jQuery хорошо работать вместе? Похоже, что такого рода конфликты будут повсюду на PHP-сайтах, использующих jQuery.