html - 用 jQuery 的超链接替换一些值

Question

我有以下html代码：

<table id="MatrixTable">
    <tr>
        <td id="321"> 0 </td>
    </tr>
</table

A. 当鼠标悬停在 jQuery 上时，如何用超链接替换“0”文本，如下所示：

<table id="MatrixTable">
    <tr>
        <td id="321"> 
            <a class="modal-dialog-link" href="Edit?matrixID=321" updatefunction="UpdateMatrix">
                0
            </a>
        </td>
    </tr>
</table>

$("table#MatrixTable td").mouseover(function () {
    // doing something here...
});

B.当使用 jQuery 离开鼠标时，我怎样才能回到原来的“0”，如下所示：

$("table#MatrixTable td").mouseleave(function () {
    // doing something here...
});

谢谢。

Answer 1

使用jQuery.hover

$("table#MatrixTable #321").hover(function () {
     $(this).html('<a class="modal-dialog-link" href="Edit?matrixID=321"'+   
           'updatefunction="UpdateMatrix">0</a>');
},function(){
     $(this).text('0');
});

Answer 2

您可以使用hover将事件处理程序绑定到mouseenterandmouseleave事件，并且可以使用wrapandunwrap将内容包装在a元素中：

​$("#321").hover(function() {
    $(this).contents().wrap("<a>"); 
}, function() {
    $(this).find("a").contents().unwrap();   
});​​​​​

这是一个工作示例。当您将鼠标悬停在元素上时，检查 DOM 以查看更改。

这似乎是一种使用链接的非常奇怪的方式……为什么链接不能总是在 DOM 中？