javascript - JQuery 显示名称不明确的元素？

Question

我有几个由 PHP 生成的 div，设置如下

<div style="width:215px;height:305px;background-color: rgba(255, 255, 255, 0.5);background-position: 0px 0px;background-repeat: no-repeat;background-size: 215px 305px;display:none;position:fixed;top:100px;left:100px;" id="more####"></div>

将 id 中的 # 替换为数字(并不总是 4 个数字)，并将其背景图像设置在另一个自动生成的 css 文件中。删除 display:none; 可以让它们全部以 100、100 的分辨率显示，并且背景完美。

但是我希望使用 JQuery 创建一个 javascript 文件，以便当我将鼠标悬停在表格行上时设置为

<tr id="yellow" class="yellow ####">

“yellow”可以是“yellow”、“green”、“red”、“alt”，或者 id 和 class 中都没有。具有匹配编号的div将出现在鼠标位置。如果可能的话，它将随着鼠标移动，直到鼠标不再悬停在表格行上，然后它将再次隐藏。

我从之前的 stackoverflow 问题中获取了下面的代码，并对其进行了编辑以应用于表格的第一行，但它不起作用。第一行如下:

<tr id="red" class="red 9776">

div 是

<div id="more9776" style="width:215px;height:305px;background-color: rgba(255, 255, 255, 0.5);background-position: 0px 0px;background-repeat: no-repeat;background-size: 215px 305px;display:none;position:fixed;top:100px;left:100px;"></div>

你知道为什么下面的代码不起作用吗？

    var mouseX;
    var mouseY;

    $(document).mousemove( function(e) {
        mouseX = e.pageX; 
        mouseY = e.pageY;
    });  

    $(".9776").mouseover(function(){
        $('#more9776').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
    });

    $(".9776").mouseout(function(){
        $('#more9776').fadeOut('slow');
    });

此外，如何应用代码来处理所有表格行，而不需要为每行定义 mouseover 和 mouseout？

Answer 1

正如 cincodenada 所说，最好使用 data 属性来存储 ID。我做了一个简单的例子:

HTML

<table>
    <tr data-id="9776">
        <td>asf</td>
    </tr>
    <tr data-id="9777">
        <td>asf</td>
    </tr>
    <tr data-id="9778">
        <td>asf</td>
    </tr>
</table>
<div id="more9776">9776</div>
<div id="more9777">9777</div>
<div id="more9778">9778</div>

jQuery

var $activeDiv = null;
$('tr').mouseenter(function (ev) {
    $activeDiv = $('#more' + $(this).data('id')).show();
    update(ev);
}).mousemove(function (ev) {
    update(ev);
}).mouseleave(function () {
    $activeDiv.hide();
    $activeDiv = null;
});

function update(ev) {
    if ($activeDiv) {
        $activeDiv.css({
            'top': ev.clientY + 10,
            'left': ev.clientX + 10
        });
    }
}

演示

http://jsfiddle.net/LVSzK/