-2

Im attempting to create a mouseover event for pictures on a page to load a summary of that picture into a div container called "contentarea". I'm new into coding, so please forgive my inaptitude. The code is below, but im not sure its going to work. Basically, I have 5 pictures of dogs on a webpage, and I want the mouseover event over a picture of the dog to load information from a seperate page called "content.html." The content that is loaded should load from a that has the same ID as the ID of the picture that is cursor is currently hovering over. The content will then load into a div that is below all the pictures called "contentarea." All pictures belong to the class dog. I had tried to adapt someone else's code, but to no effect.

   <script>
   function(){
    $(.dog).mouseover(function(e) {
        var dogId = $(this).data('id');
        $("contentarea").load("content.html
         # " + dogId + " ");

    }); 
   </script>
4

1 に答える 1

1

実際には、ajax を使用して別の html ファイルを読み込むことができます。これは、zongweil がコメントで述べたような問題ではありません。読み込んでいるコンテンツは動的ではないためです。

' を使用して .dog が文字列であることを指定するには、追加する必要があります。さらに、# dogId を使用して達成しようとしていることを説明してください。読み込んでいる html ファイルにアンカーはありますか? ロードされたhtmlにアンカーを追加しても、期待される効果が得られるとは思いません。1 匹の犬だけの情報をロードする場合は、content1.html、content2.html などの適切な ID を持つ複数の content.html ファイルを作成し、これを使用します。

<script>
    $('.dog').mouseover(function(e) {
        var dogId = $(this).data('id');
        $("#contentarea").load("content" + dogId + ".html");
    }); 
   </script>

または、代わりに適切な ID を持つ単一の HTML ファイルを使用します。

<div id="dogcontent1">
TEXT TEXT TEXT
</div>
<div id="dogcontent2">
TEXT TEXT TEXT
</div>

そして、スクリプトでこれを使用します：

<script>
    $('.dog').mouseover(function(e) {
        var dogId = $(this).data('id');
        $("#contentarea").load("content.html #dogcontent"+ dogId );
    }); 
   </script>
于 2012-12-10T02:09:01.297 に答える