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

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

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

最近我想改变它，以便除了这个功能之外，我还可以使用 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');
    }
});
});

Answer 2

听起来代码中存在语法错误。尝试改变这个：

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

到：

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

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