0

我有一个链接列表，我在悬停时为其制作了一个“弹出”div。这些链接都指向一个查询，例如?page=link1. 我试图在查询后获取值，因此link1并将其放入 div 的 html 中。现在有了 .match ，什么都不会发生。如果我只使用 .attr('href') 那么我会得到一个“未定义”的响应。

有人可以告诉我我做错了什么吗？

这是一个小提琴

这是我现在拥有的代码。任何能让我朝着正确方向前进的帮助都会很棒。我知道我很接近，我只是对 jquery 还没有很好的理解。

jQuery

$(document).ready(function() {
    var moveLeft = 20;
    var moveDown = 10;
    $('#pops').hover(function(a) {
        var file = $(this).attr("href").match(/page=([0-9]+)/)[1];
        $('#pop-up').html('file name is ' + file);
        $('#pop-up').show();
        return false
        a.preventDefault();
    });
    $('#pops').mousemove(function(b) {
        $("#pop-up").css('top', b.pageY + moveDown).css('left', b.pageX + moveLeft);
        return false
        b.preventDefault();
    });
});​

HTML

更新：我的链接描述不正确。查询实际上包含数字、字母和小数。

<div id="pops">
 <a href="content.asp?page=ns2.6">link 1</a><br>
 <a href="content.asp?page=ns3.8">link 2</a><br>
 <a href="content.asp?page=jp1.0">link 3</a><br>
 <a href="content.asp?page=jp2.1">link 4</a><br>
</div>
<div id="pop-up"></div>
4

6 回答 6

3

您的选择器和正则表达式错误，您需要选择一个<a>来获取它href，而您忘记了link正则表达式中的。

        $('#pops a').hover(function(a) {
            var file = $(this).attr("href").match(/page=(link[0-9]+)/)[1];

小提琴

此正则表达式匹配给定的所有样本/page=([a-z]{2}\d\.\d)/

http://jsfiddle.net/mowglisanu/9X7ee/8/

于 2012-07-31T20:44:25.010 回答
2

您的悬停功能应该是：

$('#pops a').hover(function(e) {
    var file = $(this).attr("href").match(/page=(.*)/)[1];
    $('#pop-up').html('file name is ' + file);
    $('#pop-up').show();
    return false
    a.preventDefault();
});

jsFiddle 示例

请注意，选择器错误（应该是$('#pops a')）并且正则表达式也不正确（应该是/page=(.*)/）。

于 2012-07-31T20:45:57.163 回答
1

如果您要使用“this”，那么您需要定位“a”元素：

$('#pops').hover(function(a) {

应该 ：

$('#pops a').hover(function(a) {

您可以通过使用 JavaScript 拆分方法并选择数组的第二个值来获取文件名，如下所示：

var fileName = file.split("=")[1];
于 2012-07-31T20:44:43.930 回答
1

好的，您的代码存在一些问题：

1 - 您希望悬停与锚本身相关联，而不是与它们的容器相关联。IE $('#pops a').hover(function(a) { ... });

当您使用 $(this).attr("href")...this时，会引用 #pops 容器，但您希望它引用实际的锚点。

2 - 你匹配了错误的正则表达式。

以下代码在您的小提琴中进行了测试。

希望能帮助到你。

$(document).ready(function() {
        var moveLeft = 20;
        var moveDown = 10;

        $('#pops a').hover(function(a) {
        var file = $(this).attr("href").match(/link\d/i);

        $('#pop-up').html('file name is ' + file);
        $('#pop-up').show();

        return false
        a.preventDefault();
        });

        $('#pops').mousemove(function(b) {
        $("#pop-up").css('top', b.pageY + moveDown).css('left', b.pageX + moveLeft);

        return false
        b.preventDefault();
        });    
});​
于 2012-07-31T20:54:49.797 回答
0

我认为正则表达式应该是/page=link([0-9]+)/

于 2012-07-31T20:42:03.490 回答
0

如果在 href attr 中仅出现页面中的数字，则只需

var file = $(this).attr("href").match(/([0-9]+)/);
于 2012-07-31T20:51:24.847 回答