當使用jQuery的類有多個用途時，選擇一個類中的鏈接

我一直堅持這個代碼2天現在，我敢肯定它相對簡單。基本上我創建了元素週期表來練習一些HTML/CSS，然後我決定讓它與jQuery交互。我想要的只是點擊一個元素，並打開一個新窗口，帶您訪問該元素的維基百科網站。我只在最左邊的一行輸入鏈接以便首先獲得代碼。問題是所有的元素都有相同的類「盒子」，所以當我用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/

來源

2013-05-28 Tyler McGinnis

得到它的工作。感謝大家的幫助！ –

這可能對你的工作

var newLink = $(this).find('a').attr('href')

來源

2013-05-28 06:57:31

This Works！非常感謝！我沒有足夠的代表讚揚你，但我真的很感激它。這麼簡單，但卻很完美。再次感謝！ –

如果你將永遠有直接的DIV中的鏈接，你可以修改你的選擇

$('.box a').click(function() { 
    window.open($(this).attr('href'), 'window name', 'window settings'); 
    return false; 
});

來源

2013-05-28 06:58:44 Achrome

當使用jQuery的類有多個用途時，選擇一個類中的鏈接

回答

相關問題