php - jQuery 代码中的 JavaScript .replace 函数未给出预期结果

Question

我有一个用 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>';

将当前页面设置为 yes 以标记它。

我基本上给它两个链接和图像数组，当前页面有一个突出显示的图像。这个菜单似乎工作正常，我已经使用了一段时间。

最近我想改变它，以便除了这个功能之外，我还可以使用 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 检查元素时，类 ID 和属性是我设置的，例如，突出显示的链接设置为是，其他未设置。似乎除了 else 分支之外一切正常。我错过了什么？

编辑

当主页是当前页面时，我查看了页面源代码，认为它应该是“_dark”，因为它看起来像深色图像，但来源却说它是“_light”图像。但是当我用 Firefox 检查元素时，它告诉我它是具有 alt 属性的“_dark”图像。我相信 PHP 正在按预期将数据写入页面(服务器派生)，并且 jQuery 正在按预期对其进行操作(更改 DOM)，但我无法让它们正确播放。我想我需要在悬停事件后以某种方式使用 jQuery 设置图像，以使其看起来像预期的那样。我怎样才能让它们按照我想要的方式运行？

编辑 2

我想我明白了为什么 .attr() 和 .data() jQuery 方法不起作用。 docs说这些与集合中的第一个元素一起工作。还是我误解了？所以基本上，即使 PHP 以我想要的方式编写元素，在正确的位置并使用正确的值，当我检查元素时，我会得到不同的值。这似乎会阻止悬停/替换正常工作。

我尝试了这个更简单的变体:

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

然后我测试 test 是否等于 alt，我现在告诉 PHP 将其放置在 img 标记之后。但出于某种原因，当我提醒 test 变量时，我仍然未定义。大概是因为img标签属性的顺序。

PHP 开发人员如何解决这个问题并让 PHP 和 jQuery 一起很好地协同工作？在使用 jQuery 的 PHP 站点中，这些类型的冲突似乎无处不在。

Answer 1

自定义 HTML 属性只真正随 HTML5 一起出现，因此您可能会遇到一些关于 data-id 属性的额外问题。

我建议向 img 添加一个类 addClass() .然后，您可以使用 hasClass() 测试元素是否具有该类.

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

然后你会做类似的事情

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