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个数字），并将其background-image设置为另一个自动生成的css文件。删除display:none;允许它们全部显示为100,100，背景完全正常。

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

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

“黄色”是“黄色”，“绿色”，“红色”，“alt”，或者ID和类都没有。具有匹配编号的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/

Answer 2

当你提到你的最后一句时，你所拥有的代码将成为扩展到多个ID的噩梦。我建议改为在表行中添加data-属性，然后向表中添加一般事件侦听器，该表从行中获取id并显示/隐藏相应的div。一般来说：

<table id="thetable">
    <tr id="yellow" class="yellow" data-id="9776"></tr>
    <tr id="red" class="red" data-id="8523"></tr>
</table>

然后：

$("#thetable").on('mouseover','tr',function(){
    id = $(this).data('id');
    $('#more' + id).css({'top':mouseY,'left':mouseX}).fadeIn('slow');
});

$("#thetable").on('mouseout','tr',function(){
    id = $(this).data('id');
    $('#more' + id).fadeOut('slow');
});

阅读jQuery on()和data()方法，详细了解上述代码的工作原理。

JQuery显示带有模糊名称的元素？

2 个答案: