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和属性是我设置的,例如,突出显示的链接设置为yes而其他链接未设置.除了else分支外,似乎一切正常.我错过了什么？

编辑

当主页是最新的时,我查看了页面源,认为它将是"_dark",因为它看起来像是黑暗的图像,但是消息来源说它是"_light"图像.但是当我用Firefox检查元素时,它告诉我它是具有alt属性的"_dark"图像.我相信PHP正在按照预期将数据写入页面(服务器派生),并且正如预期的那样jQuery正在对它进行操作(更改DOM),但我无法让它们正常播放.我想我需要以某种方式在悬停事件之后使用jQuery设置图像,以使它看起来像它应该的那样.我如何让这些功能像我想要的那样？

编辑2

我想我明白为什么.attr()和.data()jQuery方法不起作用.该文件说,这些与集合中的第一个元素的工作.还是我误解了？所以基本上,即使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');
    }
});
});