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 回答