0

次の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 で mouseleave を行うと、元の「0」に戻るにはどうすればよいですか。

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

ありがとう。

4

2 に答える 2

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');
});
于 2012-05-17T07:32:15.340 に答える
0

を使用hoverしてイベント ハンドラーをmouseenterおよびmouseleaveイベントにバインドし、 および を使用wrapしてコンテンツを要素unwrapにラップできます。a

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

これが実際の例です。DOM を調べて、要素の上にカーソルを置いたときに変更を確認します。

しかし、これはリンクを使用する非常に奇妙な方法のように思えます... なぜリンクが常に DOM にあるとは限らないのでしょうか?

于 2012-05-17T07:35:39.857 に答える