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

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

В функции у меня выводятся эти HTML-атрибуты:

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

$menu_output.= '';

И установить 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">';

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

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

Недавно я хотел изменить его так, чтобы в дополнение к этой функциональности я получал эффекты наведения с помощью 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. Что мне не хватает?

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

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

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

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

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

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

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

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