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方法无效。 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');
       }
});

jQuery代码中的JavaScript .replace函数未提供预期结果

2 个答案: