jQuery DOM遍历问题

我在学习jQuery，无法理解为什么这段代码不工作。我想要发生的是当点击（.tabs> a）时，#title和#content div应分别显示属于它们（.tabs> a）子项的.tabtitle和.tabcontent中的内容。jQuery DOM遍历问题

这是我目前的HMTL：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>HTML 5 Tester</title> 

<link rel="stylesheet" href="css/style.css"> 
</head> 

<body> 
    <header> 
    </header> 
    <nav> 
     <div class="tabs"> 
      <a href="#tab1" id="tab1" class="tab"> 
       Home 

       <span class="tabtitle" id="tabtitle1"> 
       Home Title 
       </span> 
       <span class="tabcontent" id="tabcontent1"> 
       This is the home tab content 
       </span>    
      </a> 

      <a href="#tab2" id="tab2" class="tab"> 
       About 

       <span class="tabtitle" id="tabtitle2"> 
       About Title 
       </span> 
       <span class="tabcontent" id="tabcontent2"> 
       This is the about tab content 
       </span> 
      </a> 
      <a href="#tab3" id="tab3" class="tab"> 
       Contact 

       <span class="tabtitle" id="tabtitle3"> 
       Contact Title 
       </span> 
       <span class="tabcontent" id="tabcontent3"> 
       This is the contact tab content 
       </span> 
      </a> 
      <a href="#tab4" id="tab4" class="tab"> 
       Graphic Design 

       <span class="tabtitle" id="tabtitle4"> 
       Graphic Design Title 
       </span> 
       <span class="tabcontent" id="tabcontent4"> 
       This is the graphic design tab content 
       </span> 
      </a> 
      <a href="#tab5" id="tab5" class="tab"> 
       Photography 

       <span class="tabtitle" id="tabtitle5"> 
       Photography Title 
       </span> 
       <span class="tabcontent" id="tabcontent5"> 
       This is the photography tab content 
       </span> 
      </a> 
      <a href="#tab6" id="tab6" class="tab"> 
       Web Design 

       <span class="tabtitle" id="tabtitle6"> 
       Web Design Title 
       </span> 
       <span class="tabcontent" id="tabcontent6"> 
       This is the web design tab content 
       </span> 
      </a> 
     </div> 
    </nav> 

    <article> 
     <div id="main"> 
     <p id="title"> </p> 
     <p id="content"> </p> 
     </div> 



    </article> 

    <aside align="right"> 

    </aside> 

    <footer> 
    <span id="cpyrt">&copy; 2013 Redloh Visions</span> 
    </footer> 
    <script src="scripts/jquery.min.js"></script> 
    <script src="scripts/content.js"></script> 
</body> 
</html>

我现在的CSS：

body { 
    margin:0; 
    width: 100%; 
    position: fixed; 
    height: 100%; 
    border: none; 
} 
header { 
    background-color: #036; 
    height: 14%; 
    padding: 9px; 
    box-shadow: inset #000 0px -3px 150px; 
} 
nav{ 
    background-color: #666; 
    box-shadow: inset #000 -50px -15px 50px; 
    float:left; 
    width: inherit; 
    height: 59px; 
} 
/*----------------------------------------------------------------------------*/ 
/*--------------Navigation Tabs Styling ----- START --------------------------*/ 
/*----------------------------------------------------------------------------*/ 

div.tabs { 
    position: relative; 
    font-size: 0; 
    margin-left: 10px; 
} 

div.tabs > a { 
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; 
    margin-left: 10px; 
    display: inline-block; 
    padding: 9px; 
    font-size: 16px; 
    border-radius: 5px 5px 0 0; 
    background-color: #222; 
    color: #fff; 
    text-decoration: none; 
    line-height: 1em; 
    width: 45px; 
    text-align: center; 
    box-shadow: inset #000 0px -3px 6px; 
    -webkit-transition: border-radius 0.3s linear, color 0.5s linear, background-color 1s linear; 
    -moz-transition: border-radius 0.3s linear, color 0.5s linear, background-color 1s linear; 
    -o-transition: border-radius 0.3s linear, color 0.5s linear, background-color 1s linear; 
    width: 140px; 
    margin-top: 25px; 
    text-shadow: #fff 0px 0px 3px; 
} 


div.tabs > a:target { 
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; 
    color: #000; 
    background-color: #08c; 
    box-shadow: inset #001 0px 2px 1px; 
    margin-top: -5px; 
    font-size: 18px; 
    padding-top:12px; 
    width: 140px; 
    border-radius: 16px 16px 0 0; 
    height: 18px; 
    -webkit-transition: border-radius 0.3s linear, color 0.5s linear; 
    -moz-transition: border-radius 0.3s linear, color 0.5s linear; 
    -o-transition: border-radius 0.3s linear, color 0.5s linear; 
     text-shadow: #000 0px 0px 3px; 

} 
/*----------------------------------------------------------------------------*/ 
/*--------------Navigation Tabs Styling ----- END ----------------------------*/ 
/*----------------------------------------------------------------------------*/ 

/*----------------------------------------------------------------------------*/ 
/*--------------Main Content Styling ----- START -----------------------------*/ 
/*----------------------------------------------------------------------------*/ 
#main{ 
    position: relative; 
    float:inherit; 
    width: 77%; 
    height: 62%; 
    background-color: #999; 
    box-shadow: #001 0px 16px 50px; 
    margin-top: 1%; 
    margin-left: 2%; 
} 
#main p{ 
    margin:10px;  
} 
#title{ 
    font-size:56px; 
    text-shadow:#000 2px 0px 4px; 
} 
#content{ 
    font-size: 25px; 
} 
.tabcontent{ 
    display: none; 
} 
.tabtitle{ 
    display: none; 
} 
/*----------------------------------------------------------------------------*/ 
/*----------------Main Content Styling ----- END -----------------------------*/ 
/*----------------------------------------------------------------------------*/ 

article{ 
    padding: 5px; 
    float: left; 
    background-color: #444; 
    height: inherit; 
    width: inherit; 
    box-shadow: inset #08c -150px 250px 350px; 
} 
aside{ 
    top: auto; 
    padding: 10px; 
    position: fixed; 
    right: 0; 
    background-color: #111; 
    width: 17%; 
    height: inherit; 
    float: right; 
    box-shadow: inset #333 1px -100px 15px; 
} 

footer { 
    box-shadow: inset #000 0px -5px 50px; 
    position: fixed; 
    bottom: 0; 
    background-color: #036; 
    width: inherit; 
    height:8%; 
    padding-top: 5px; 
} 
#cpyrt{ 
    float: right; 
    padding-right: 20px; 
}

而且我目前的jQuery：

$(document).ready(function() { 

    $('.tabs a').on("click", function(){ 
     var title = $closest('.tabtitle').text(); 
     var content = $closest('.tabcontent').text(); 
     $('#title').text(title); 
     $('#content').text(content); 
    }); 
});

这是工作，如果我jQuery的分成独立功能如下所示，但一直在努力学习如何写得更少，并做更多，因为他们说哈哈。任何意见是极大的赞赏。

$('#tab1').on("click", function(){ 
     var title = $('#tabtitle1').text(); 
     var content = $('#tabcontent1').text(); 
     $('#title').text(title); 
     $('#content').text(content); 
    }); 

    $('#tab2').on("click", function(){ 
     var title = $('#tabtitle2').text(); 
     var content = $('#tabcontent2').text(); 
     $('#title').text(title); 
     $('#content').text(content); 
    }); 

    $('#tab3').on("click", function(){ 
     var title = $('#tabtitle3').text(); 
     var content = $('#tabcontent3').text(); 
     $('#title').text(title); 
     $('#content').text(content); 
    }); 

...and so on

来源

2013-05-19 StevenHolder

什么是'$ closest'？ –

你可能想用的find()，作为.tabtitle和.tabcontent是点击锚的孩子：

$(document).ready(function() { 

    $('.tabs a').on("click", function(e){ 
     e.preventDefault(); 
     var title = $(this).find('.tabtitle').text(), 
      content = $(this).find('.tabcontent').text(); 

     $('#title').text(title); 
     $('#content').text(content); 
    }); 
});

FIDDLE

来源

2013-05-19 21:01:42 adeneo

谢谢！这有助于我理解如何使用$（this）！ – StevenHolder

jQuery DOM遍历问题

回答

相关问题