1

次のコードがあります。「コード」の上にマウスを置くと、100 X100 の位置に div が表示されます。IE と Chrome で問題なく動作しています。ただし、div は Firefox で必要な位置に移動しません。それを機能させるために何を変更する必要がありますか？

注：divの配置に次のコードを使用しています

$('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

-- 完全なコード --

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Test</title>

<style type="text/css">

    .tooltip

    {

        background-color: Orange;

        position: absolute;

        border-style: solid;

        border-width: 2px;

        border-bottom: solid 2px black;

    }

</style>

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">





    function showDiv(batchId, vendorId) {



        tooltip.style.display = "block";

        batch.innerHTML = batchId;

        vendor.innerHTML = vendorId;

        $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

    }



</script>

</head>

<body>

<div>

    <div>

        <table cellspacing="0" rules="all" border="1" id="MainContent_grdTooltip" style="border-collapse: collapse;">

            <tr>

                <th scope="col">MainID</th>

                <th scope="col">SecondID</th>

                <th scope="col">CODE</th>

            </tr>

            <tr>

                <td>101</td>

                <td>999999991</td>

                <td onmouseover="showDiv(101,999999991)">55789</td>

            </tr>

        </table>

    </div>

    <div id="tooltip" class="tooltip">

        <table>

            <tr>

                <td>Main Id:</td>

                <td id="batch"></td>

            </tr>

            <tr>

                <td>Second Id:</td>

                <td id="vendor"></td>

            </tr>

        </table>

    </div>

</div>

</body>

</html>
4

4 に答える 4

2

コードを示す jsfiddle を次に示します。

http://jsfiddle.net/6GaEA/1/

問題 (firebug によると) はスクリプトにあります。定義されていない変数「tooltip」を参照しています。Chrome と IE はこのエラーを飲み込んで続行するようですが、Firefox は窒息して停止します。

これを変える：

 function showDiv(batchId, vendorId) {

    tooltip.style.display = "block";

    batch.innerHTML = batchId;

    vendor.innerHTML = vendorId;

    $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

}

これに：

function showDiv(batchId, vendorId) {

    $('#tooltip').css('display',"block");

    $('#batch').html(batchId);

    $('#vendor').html(vendorId);

    $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

}

編集: $("#tooltip") で jQuery css 関数が 2 回呼び出されることを認識しています。私は可能な限り同じコードの流れを維持しようとしていました:)

于 2012-04-11T19:04:58.560 に答える
0

この方法を試してください

                <script type="text/javascript">
            function showDiv(batchId, vendorId) {
                document.getElementById('tooltip').style.display = "block";
                document.getElementById('batch').innerHTML = batchId;
               // batch.innerHTML = batchId;
                document.getElementById('vendor').innerHTML = vendorId;
                //vendor.innerHTML = vendorId;
            }

        </script>
于 2012-04-11T17:49:10.120 に答える
0

jQuery CSS メソッドは次のように使用する必要があります。

$("#something").css(propertyName,value);

スクリプトでイベントを次のように処理することをお勧めします。

$("#something").mouseover(function() {
    $("#tooltip").css("display","block");
  });

要素を絶対的に配置するには、その親を相対的に配置する必要があります。

于 2012-04-11T17:31:58.683 に答える
0

「絶対」を要素の位置として機能させるには、親要素の位置を相対または絶対に設定する必要があります。つまり、onmouseover イベントを持つ TD に css "position: relative" を追加します。

于 2012-04-11T17:21:29.107 に答える