0

私はこのコードで 2 日間立ち往生しており、比較的単純であると確信しています。基本的に、HTML/CSS を練習するために元素の周期表を作成し、jQuery とインタラクティブにすることにしました。要素をクリックするだけで、新しいウィンドウが開き、その要素のウィキペディア サイトに移動します。最初にコードを正しく表示するために、左端の行にのみリンクを入力しました。問題は、すべての要素に同じクラス「ボックス」があるため、jQuery でそれを選択してその中のリンクを取得すると、すべての要素に同じ「ボックス」クラスがあるため、ページ内のすべてのリンクが返されることです。正しい方向への微調整は素晴らしいでしょう。

ありがとう！

リンクはこちらです。

HTML:

<!DOCTYPE html>
  <html>
<head>
    <title> Periodic Table of Elements, in CSS! </title> 
    <link rel="stylesheet" type="text/css" href="style.css"> <!--Main StyleSheet -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> <!-- Google Fonts --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <!-- jQUery -->
    <script type="text/javascript" src="js/jquery.js"></script>
</head> 
<body>
    <section>
    <div id="menu"> The Periodic Table of Elements </div> 
        <div id="container">
        <div id="panelOne">
            <div class="box"><a href="http://en.wikipedia.org/wiki/Hydrogen"> H </a></div> 
            <div class="box"><a href="http://en.wikipedia.org/wiki/Lithium"> Li </a></div> 
            <div class="box"><a href="http://en.wikipedia.org/wiki/Sodium"> Na </a></div> 
            <div class="box"><a href="http://en.wikipedia.org/wiki/Potassium"> K </a></div> 
            <div class="box"><a href="http://en.wikipedia.org/wiki/Rubidium"> Rb </a></div> 
            <div class="box"><a href="http://en.wikipedia.org/wiki/Caesium"> Cs </a></div> 
            <div class="box"><a href="http://en.wikipedia.org/wiki/Francium"> Fr </a></div> 
        </div>
        <div id="panelTwo">
            <div class="box"> Be </div> 
            <div class="box"> Mg </div> 
            <div class="box"> Ca </div> 
            <div class="box"> Sr </div> 
            <div class="box"> Ba </div> 
            <div class="box"> Ra </div> 
        </div>
        <div id="panelThree">
            <div class="box"> Sc </div> 
            <div class="box"> Y </div> 
            <div class="box"> X </div> 
            <div class="box"> X </div> 
        </div>
        <div id="panelThree">
            <div class="box"> Ti </div> 
            <div class="box"> Zr </div> 
            <div class="box"> Hf </div> 
            <div class="box"> Rf </div> 
        </div>
        <div id="panelThree">
            <div class="box"> V </div> 
            <div class="box"> Nb </div> 
            <div class="box"> Ta </div> 
            <div class="box"> Db </div> 
        </div>
        <div id="panelThree">
            <div class="box"> Cr </div> 
            <div class="box"> Mo </div> 
            <div class="box"> W </div> 
            <div class="box"> Sg </div> 
        </div>
        <div id="panelThree">
            <div class="box"> Mn </div> 
            <div class="box"> Tc </div> 
            <div class="box"> Re </div> 
            <div class="box"> Bh </div> 
        </div>
        <div id="panelThree">
            <div class="box"> Fe </div> 
            <div class="box"> Ru </div> 
            <div class="box"> Os </div> 
            <div class="box"> Hs </div> 
        </div>
        <div id="panelThree">
            <div class="box"> Co </div> 
            <div class="box"> Rh</div> 
            <div class="box"> Ir </div> 
            <div class="box"> Mt </div> 
        </div>
        <div id="panelThree">
            <div class="box"> Ni </div> 
            <div class="box"> Pd </div> 
            <div class="box"> Pt </div> 
            <div class="box"> Ds </div> 
        </div>
        <div id="panelThree">
            <div class="box"> Cu </div> 
            <div class="box">Ag </div> 
            <div class="box"> Au </div> 
            <div class="box"> Rg </div> 
        </div>
        <div id="panelThree">
            <div class="box"> Zn </div> 
            <div class="box"> Cd </div> 
            <div class="box"> Hg </div> 
            <div class="box"> Cn </div> 
        </div>
        <div id="panelTwo">
            <div class="box"> B </div> 
            <div class="box"> Al </div> 
            <div class="box"> Ga </div> 
            <div class="box"> In </div> 
            <div class="box"> Ti </div> 
            <div class="box"> Uut </div> 
        </div>
        <div id="panelTwo">
            <div class="box"> C </div> 
            <div class="box"> Si </div> 
            <div class="box"> Ge </div> 
            <div class="box"> Sn </div>
            <div class="box"> Rb </div> 
            <div class="box"> Fl </div>  
        </div>
        <div id="panelTwo">
            <div class="box">N </div> 
            <div class="box">P </div> 
            <div class="box">As </div> 
            <div class="box">Sb </div> 
            <div class="box"> Bi </div> 
            <div class="box"> Uup </div> 
        </div>
        <div id="panelTwo">
            <div class="box"> O </div> 
            <div class="box"> S </div> 
            <div class="box"> Se </div> 
            <div class="box"> Te </div> 
            <div class="box"> Po </div> 
            <div class="box"> Lv </div> 
        </div>
        <div id="panelTwo">
            <div class="box"> F </div> 
            <div class="box"> Cl </div> 
            <div class="box"> Br </div> 
            <div class="box"> I </div> 
            <div class="box"> At </div> 
            <div class="box"> Uus </div> 
        </div>
        <div id="panelOne">
            <div class="box"> He </div> 
            <div class="box"> Ne </div> 
            <div class="box"> Ar </div> 
            <div class="box"> Kr </div> 
            <div class="box"> Xe </div> 
            <div class="box"> Rn </div> 
            <div class="box"> Uuo </div> 
        </div>
    </div>
    <div id="clear"></div>
    <div id="lowerContainer">
        <div class="bottom">
            <div class="box"> La </div> 
            <div class="box"> Ac </div> 
        </div>
        <div class="bottom">
            <div class="box"> Ce </div> 
            <div class="box"> Th </div> 
        </div>
        <div class="bottom">
            <div class="box"> Pr </div> 
            <div class="box"> Pa </div> 
        </div>
        <div class="bottom">
            <div class="box"> Nd </div> 
            <div class="box"> U </div> 
        </div>
        <div class="bottom">
            <div class="box"> Pm </div> 
            <div class="box"> Np </div> 
        </div>
        <div class="bottom">
            <div class="box"> Sm </div> 
            <div class="box"> Pu </div> 
        </div>
        <div class="bottom">
            <div class="box"> Eu </div> 
            <div class="box"> Am </div> 
        </div>
        <div class="bottom">
            <div class="box"> Gd </div> 
            <div class="box"> Cm </div> 
        </div>
        <div class="bottom">
            <div class="box"> Tb </div> 
            <div class="box"> Bk </div> 
        </div>
        <div class="bottom">
            <div class="box"> Dy </div> 
            <div class="box"> Cf </div> 
        </div>
        <div class="bottom">
            <div class="box"> Ho </div> 
            <div class="box"> Es </div> 
        </div>
        <div class="bottom">
            <div class="box"> Er </div> 
            <div class="box"> Fm </div> 
        </div>
        <div class="bottom">
            <div class="box"> Tm </div> 
            <div class="box"> Md </div> 
        </div>
        <div class="bottom">
            <div class="box"> Yb </div> 
            <div class="box"> No </div> 
        </div>
        <div class="bottom">
            <div class="box"> Lu </div> 
            <div class="box"> Lr </div> 
        </div>
    </div>
    <div id="infoContainer">
            This is the information. 
    </div> 
    </section>  
</body>

jQuery:

$(document).ready(function(){
var $ic = $('#infoContainer');  
var $this = $(this); 
$ic.hide(); 
$('.box').click(
    function(){
        var link = $this.find('a');
        var newLink = $(link).attr('href');
        window.open(link, 'window name', 'window settings');
        return false; 
    }
  ); //End box click
}); //End ready

http://jsfiddle.net/xAXyd/1/

4

2 に答える 2

3

これはあなたのために働くことができます

var newLink = $(this).find('a').attr('href')
于 2013-05-28T06:57:31.360 に答える
1

常にdiv内に直接リンクがある場合は、セレクターを変更するだけです

$('.box a').click(function() {
    window.open($(this).attr('href'), 'window name', 'window settings');
    return false;
});
于 2013-05-28T06:58:44.573 に答える