Question

我有一个链接列表，我在悬停时创建了一个'弹出'div。这些链接都指向?page=link1之类的查询。我试图在查询后获取值，所以link1并将其放在div的html中。现在有了.match，没有什么会发生。如果我只使用.attr（'href'），那么我会得到一个'未定义'的响应。

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

Heres a fiddle

这是我现在拥有的代码。让我走向正确方向的任何帮助都会很棒。我知道我很接近，但我还没有对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>

Answer 1

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

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

FIDDLE

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

的所有样本

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

Answer 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 example

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

Answer 3

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

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

应该是：

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

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

var fileName = file.split("=")[1];

Answer 4

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

1 - 您希望悬停与锚本身而不是其容器相关联。即$('#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();
        });    
});

Answer 5

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

Answer 6

如果只发生href attr页面中的数字，只需

var file = $(this).attr("href").match(/([0-9]+)/);

在悬停时获取当前锚点href

6 个答案: