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

这似乎对工作，如果一部分，但else分支没有做什么，我认为应该。它将链接改为灯光，然后将悬停改变为黑色，然后点亮。

当我使用Firefox检查元素时，我设置了类ID和属性，例如，突出显示的链接设置为yes，其他设置未设置。似乎一切工作除了else分支。我错过了什么？

编辑

我看着网页的源文件时，主页被电流，以为这将是“_dark”，因为它看起来像黑暗中的图像生成，但消息人士称它是“_light”形象。但是，当我用Firefox检查元素时，它告诉我这是具有alt属性的“_dark”图像。按照预期，我相信PHP正在将数据写入页面（服务器派生），并且jQuery正在按照预期操作（更改DOM），但是我无法让它们正确播放。我想我需要以某种方式在悬停事件后用jQuery设置图像，以便它看起来应该是这样。我如何让这些功能像我想要的那样工作？

EDIT 2

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

我想这种变化就是有点简单：

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

我测试test等于alt我现在告诉PHP放置img标签之后。但由于某种原因，当我提醒test变量时，Im仍然没有定义。推测是因为img标签属性的顺序。

如何让PHP开发人员解决这个问题并使PHP和jQuery一起玩得很好？似乎这些类型的混淆将会在使用jQuery的PHP站点中遍布。

Answer 1

自定义HTML属性才真正来到与HTML5，所以你可能会得到与数据-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

它听起来代码中有语法错误。尝试chnage此：

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