0

リンクをクリックすると、メンバーの経歴の詳細がページのさらに下の特定の div に表示されるのを確認できます。（これを行うためにフレームを使用したくありません。）以下は、他のスレッドからの提案を使用して入手した現在のバージョンですが、リンクをクリックしても何も起こりません。私はまだこれに慣れていないので、助けていただければ幸いです。フィドルを作成していないので、帰属全体を確認できます。以前のバージョンで気付いたエラーの 1 つは、フィドルで使用されているものよりも古いバージョンの jQuery へのコード内の参照でした。

<!DOCTYPE HTML> 
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Can YOU get this to work?</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js">
    $(document).ready(function()) {
        $(".link").click(function(){    
            $(".hide").hide();
            var dataType = $(this).attr('data-type');
            $("#" + dataType).show();
        });
    });
    </script>
    <style type="text/css">

    #profiles {background:#FFFFCC; border-style:solid; border-color:#ffd119; padding:15px; width:600px;text-align:left;position:absolute; top:450px;left:180px;}
    .show {display:block; width:600px;}
    .hide {display:none;}
    .biopic {float:left; margin-right:15px; width:200px; height:200px; border-style:solid; border-color:#000099;clear:left;}
    .biostext {display:inline; margin-left:15px; font-family:Georgia, serif; clear:right;}
    #bioLinks {float:left; display:block; font-family:Georgia, serif;  margin-left:25px; margin-top:15px;clear:right;}
    .link {font-family:Georgia,serif; color:#0000ff; text-decoration:none;}

    #Section {font-family:Georgia, serif;float:left; display:block; width:150px; margin-right:15px; margin-top:15px; text-align:right;}
    </style>

    </head>
    <body>
    <div id="Section">
    Honcho<br>Grand Poo-Bah<br>Dogsbody
    </div>
    <div id="bioLinks">
      <div><a href="#" data-type="bio1" class="link">Joe Bloggs</a></div>
      <div><a href="#" data-type="bio2" class="link">Monica Faux</a></div>
      <div><a href="#" data-type="bio3" class="link">John Doe</a></div>
      </div>
    <div id="profiles">
        <div id="bio1" class="hide">
            <div class="biopic"><img src="http://www.northshorebrass.org.nz/images/members_photos/JBloggs.jpg" width="200" height="200" alt="Joe Bloggs"></div>
            <div class="biostext">Joe Bloggs is swell.</div>
            </div>
            <div id="bio2" class="hide">
                    <div class="biopic"><img src="http://www.northshorebrass.org.nz/images/members_photos/MFaux.jpg" width="200" height="200" alt="Monica Faux"></div>
            <div class="biostext">Monica Faux is considering some changes in her life.</div>
        </div>
        <div id="bio3" class="hide">
            <div class="biopic"><img src="http://www.northshorebrass.org.nz/images/members_photos/JDoe.jpg" width="200" height="200" alt="John Doe"></div>
            <div class="biostext">John Doe is an unknown.</div>
        </div>
    </div>
    </body>
    </html>
4

2 に答える 2

2

$.data() は、HTML ノードから属性を取得するための適切な方法ではありません。$.attr() メソッドを使用する必要があります

$(this).attr('data-type');

リンクに設定された data-type 属性の値を返します。

于 2013-09-15T01:28:47.790 に答える
1

Remove or rename the duplicate ID tags (bio1, bio2, bio3).

  <div><a href="#" data-type="bio1" class="link">Joe Bloggs</a></div>
  <div><a href="#" data-type="bio2" class="link">Monica Faux</a></div>
  <div><a href="#" data-type="bio3" class="link">John Doe</a></div>

Using scotsninja's answer:

$(document).ready(function() {
    $(".link").click(function() {    
        $(".hide").hide();
        var dataType = $(this).attr('data-type');
        $("#" + dataType).show();
    });
});

Fiddle: http://jsfiddle.net/V6MTD/

于 2013-09-15T01:47:30.313 に答える