0

我有几个由 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 ####">

“黄色”是“黄色”、“绿色”、“红色”、“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 的情况下将代码应用于所有表行？

4

2 回答 2

2

正如 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/

于 2013-07-30T23:08:42.903 回答
1

正如您在最后一句话中提到的那样，您拥有的代码将是扩展到多个 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');
});

阅读 jQueryon()和data()方法以了解有关上述代码如何工作的更多信息。

于 2013-07-30T23:01:57.893 回答