3

私がやろうとしているのは、名前にカーソルを合わせたときに、その名前の詳細を示すツールチップポップアップを表示することです。

私は次のことをしましたが、何らかの理由でうまくいかないようです。ツールチップは表示されません。名前にカーソルを合わせると、関数が呼び出されてAJAXリクエストが実行され、詳細が文字列として返されます。関数が正常に動作し、文字列を返すことを確認しました。

返された文字列をツールチップポップアップに表示できないようです。私はこれをIE8でテストしています

Javascript関数：

function showDetails(name){
    var xmlHttpRequest; 
    if(window.XMLHttpRequest){
        xmlHttpRequest = new XMLHttpRequest();
    }else{
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP>");
    }
    xmlHttpRequest.onreadystatechange=function(){
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            document.getElementById("details").innerHTML = xmlHttpRequest.responseText;
        }
    }
    xmlHttpRequest.open("GET", "showStopsInfoPopup.do?name="+name, true);
    xmlHttpRequest.send();
}

CSS

#tooltip { position: relative; }
    #tooltip a{text-decoration: none;}
    #tooltip a span { display: none; color: #FFFFFF; }
    #tooltip a:HOVER span { display: block; position: absolute; 
                             width: 200px; background-color: #aaa; 
                             height: 50px; color: #FFFFFF; padding: 5px; }

JSPページ：

<tr id="tooltip">
    <td onmouseover="showDetails('${name}')">
        <a href="#"><c:out value="${name}"><span id="details"></span></c:out></a> 
    </td>
</tr>

ビューソースページの関連部分（生成されたhtml）のみ：「a」タグ内の「span」タグがありません!!

<tr id="tooltip">               
    <td onmouseover ="showDetails('NRT')"><a href="#">NRT</a> </td> 
</tr>    
.
.
.
...  
<span id="details">*****************</span>
4

2 に答える 2

3

動的に表示されるデータを生成していて、複数の行があると仮定しています。

その場合、テーブル内のすべての span タグは同じ id("details") になります。2 つの行を区別できる必要があります。

できることは、ID に数値を追加し、次の行に進むにつれて数値を増やして、各スパン タグに一意の ID を持たせることです。

<a href="#"><c:out value="${name}"><span id="details${index}"></span></c:out></a>

必ずインデックスを引数として JavaScript 関数に渡し、次の変更を加えてください。

function showDetails(name, index){
..
...
document.getElementById("stopsInfo"+index).innerHTML = xmlHttpRequest.responseText;
.
...
}
于 2012-10-23T17:05:15.380 に答える
1

ソースを表示して、生成された HTML を表示していただけますか。これを試してみたところ、簡単なテストを行うだけで問題なく動作するようです。

于 2012-10-22T21:05:25.853 に答える