javascriptクリックしたときにナビゲーションリンクを持つ子供を表示

Question

私はこのコードを持っています。私がストーリーやキャリアをクリックすると、h1とdivを取得し、そのリンクの段落や情報を表示します。これまでは、そのリンクに関連付けられているdivやその他の情報ではなく、h1のみが表示されていました。

$(document).ready(function() { 
 
    var fontFamily, fontSize, fontWeight; 
 
    
 
    $("section h1 a").slice().hide().first().show(); 
 
    $("section article").slice().hide().first().show(); 
 
    
 
    $('#nlist a').on('click', function(e) { 
 
     e.preventDefault(); 
 
     var $link = $(this); 
 
     var href = $link.attr('href'); 
 
     href = href.substring(1); 
 
     $('section h1 a').each(function() { 
 
      var $a = $(this); 
 
      var id = $(this).attr('id').toLowerCase(); 
 
      if (id === href) { 
 
       $a.show(); 
 
      } else { 
 
       $a.hide(); 
 
      } 
 
     }); 
 
     $('section article').each(function() { 
 
      var isTrue = false; 
 
      $(this).children().each(function() { 
 
       var text = $(this).text().toLowerCase(); 
 
       if (text.indexOf(href) !== -1) { 
 
        isTrue = true; 
 
       } 
 
      }); 
 
      if (isTrue) { 
 
       $(this).show(); 
 
       
 
      } else { 
 
       $(this).hide(); 
 
      } 
 
      isTrue = false; 
 
     }); 
 
    }); 
 
    
 
    $(document).on('click', 'a', function(e){ 
 
     var hide = document.getElementById("toolsb"); 
 
     e.preventDefault; 
 
     if($(this).text() === "Add Though") { 
 
      $(this).text("Hide Though Bar"); 
 
      hide.style.display = "none"; 
 
      $(document).find($(this).attr('data-target')).fadeIn(2000).show(); 
 
     } 
 
     else if ($(this).text() === "Read full story") { 
 
      $(this).text("Hide Paragraph"); 
 
      hide.style.display = "none"; 
 
      $(document).find($(this).attr('data-target')).fadeIn(1800).show(); 
 
     } 
 
     else if ($(this).text() === "Hide Though Bar") { 
 
      $(this).text("Add Though"); 
 
      hide.style.display = "block"; 
 
      $(document).find($(this).attr('data-target')).slideDown().hide(); 
 
     } 
 
     else if ($(this).text() === "Hide Paragraph"){ 
 
      $(this).text("Read full story"); 
 
      hide.style.display = "block"; 
 
      $(document).find($(this).attr('data-target')).slideUp().hide(); 
 
     } 
 
    }); 
 
    
 
    
 
    $(document).on("click", "#chnage", function() { 
 
     var selectP = document.getElementById("paragraph"); 
 
     var getValue = selectP.value; 
 
     var getParagraph; 
 
     
 
     var selectFF = document.getElementById("fFamilys"); 
 
     fontFamily = selectFF.value; 
 
     
 
     var selectFS = document.getElementById("fSize"); 
 
     fontSize = selectFS.value; 
 
     
 
     var selectFW = document.getElementById("fWeight"); 
 
     fontWeight = selectFW.value; 
 
     
 
     switch (getValue) { 
 
      case "first": { 
 
       document.getElementById("p1").style.fontFamily = fontFamily; 
 
       document.getElementById("p1").style.fontSize = fontSize + "px"; 
 
       document.getElementById("p1").style.fontWeight = fontWeight; 
 
       break;} 
 
      case "second": 
 
       document.getElementById("p2").style.fontFamily = fontFamily; 
 
       document.getElementById("p2").style.fontSize = fontSize + "px"; 
 
       document.getElementById("p2").style.fontWeight = fontWeight; 
 
       //getParagraph = $("p2").val(); 
 
       break; 
 
      case "third": 
 
       document.getElementById("p3").style.fontFamily = fontFamily; 
 
       document.getElementById("p3").style.fontSize = fontSize + "px"; 
 
       document.getElementById("p3").style.fontWeight = fontWeight; 
 
       
 
       break; 
 
      default:  
 
     } 
 
     
 
//  if ($(this).val() === "Italics") { 
 
//   $(this).val("UnItalics"); 
 
//   document.getElementById("textarea").style.fontStyle = "italic"; 
 
//  } 
 
//  else { 
 
//   $(this).val("Italics"); 
 
//   document.getElementById("textarea").style.fontStyle = "normal"; 
 
//  } 
 
     
 
    }); 
 
    
 
    
 
    $(function() { 
 
     $("[id^=font]").on("change", function() { 
 
      $(".textarea").css(this.id, /\d/.test(this.value) ? this.value + 
 
        "px" : this.value); 
 
     }); 
 
    }); 
 
    $(document).on("click", "#itali", function() { 
 
     if ($(this).val() === "Italics") { 
 
      $(this).val("UnItalics"); 
 
      document.getElementById("textarea").style.fontStyle = "italic"; 
 
     } 
 
     else { 
 
      $(this).val("Italics"); 
 
      document.getElementById("textarea").style.fontStyle = "normal"; 
 
     } 
 
     
 
    }); 
 
    
 
    document.getElementById("delete").onclick = dele; 
 
    document.getElementById("before").onclick = before; 
 
    document.getElementById("after").onclick = after; 
 
    
 
}); 
 
    
 
    var dele = function() { 
 
     $("#stor").find("p").last().remove(); 
 
    }; 
 
    
 
    var before = function() { 
 
     $("#fParagraph").append("<p>" + $("#textarea").val() + "</p>"); 
 
     $("textarea").value(""); 
 
    }; 
 
    var after = function() { 
 
     $("#lParagraph").append("<p>" + $("#textarea").val() + "</p>"); 
 
     $("textarea").value(""); 
 
    }; 
 

<!DOCTYPE html><meta charset="UTF-8"> 
 
     <title>Life Story</title> 
 
\t <link rel="stylesheet" href="style/Style.css"> 
 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
     <script src="jScript/javaScript.js"></script> 
 
     
 
    </head> 
 
    <body> 
 
     <div id="ndiv"> 
 
      <nav id="nlist"> 
 
       <a href="#store" style="text-decoration: none">Story</a> 
 
       <a href="#career" style="text-decoration: none">Career</a> 
 
       <a href="#deu" style="text-decoration: none">Education</a> 
 
       <a href="#contact" style="text-decoration: none">Contact</a> 
 
      </nav> 
 
     </div> 
 
     <section> 
 
      <h1> <a id="store">Coming To United State</a></h1> 
 
      <article> 
 
       <div id = "stor"> 
 
        <span id ="story"></span> 
 
        <span class = "textarea" id ="fParagraph"> </span> 
 
        <p id= "p1">But now, you can go from JavaScript beginner to DOM scripting expert in a 
 
\t \t  single book! Fast-paced, professional, and packed with expert practices, our 
 
\t \t \t new JavaScript book. 
 
       </p> 
 
       <p id = "p2"> Gates’s father could have spoken out, when Mr. Wilson did not addressed him properly at the Cut-Rate Drug Store by called he George. Addressed someone in-properly is an insult in today world, but we all know the old history, back in the day, people dealt with racial differences by drawing a strict line between white people and black people.</p> 
 
       <p id = "p3"> Wilson started addressed he George because of the incident that happen between them. I remember When I first came to the United sated, and I was playing for my high school, Ganger. I was a running back, one day, we were practicing and one of my teammate call me black monkey. <a id ="full" href="#" data-target ="#fullStory" 
 
                 style="text-decoration: none">Read full story</a>         
 
       </p> 
 
       <span class = "textarea" id ="lParagraph"> </span> 
 
       <div class= "tools" id="toolsb"> 
 
        <p>Make Changes to Paragraph</p> 
 
        <select id="paragraph" name="fonts"> 
 
         <option value="first">First Paragraph</option> 
 
         <option value="second">Second Paragraph</option> 
 
         <option value="third">Third Paragraph</option> 
 
        </select> 
 
        <select id="fFamilys"> 
 
         <option value="arial">Arial</option> 
 
         <option value="arial black">Arial Black</option> 
 
         <option value="book antiqua">Book Antiqua</option> 
 
         <option value="geneva">Geneva</option> 
 
         <option value="georgia">Georgia</option> 
 
         <option value="helvetica">Helvetica</option> 
 
         <option value="lucida sans unicode">Lucida Sans Unicode</option> 
 
         <option value="lucida grande">Lucida Grande</option> 
 
         <option value="palatino">Palatino</option> 
 
         <option value="sans-serif">Sans Serif</option> 
 
         <option value="serif">Serif</option> 
 
         <option value="tahoma">Tahoma</option> 
 
         <option value="trebuchet ms">Trebuchet MS</option> 
 
         <option value="times">Times</option> 
 
         <option value="times new roman">Times New Roman</option> 
 
         <option value="verdana">Verdana</option> 
 
        </select> 
 
        <select id = "fSize"> 
 
          <option value="8">8</option> 
 
          <option value="10">10</option> 
 
          <option value="12">12</option> 
 
          <option value="14">14</option> 
 
          <option value="16">16</option> 
 
          <option value="18">18</option> 
 
          <option value="20">20</option> 
 
          <option value="22">22</option> 
 
          <option value="24">24</option> 
 
          <option value="26">26</option> 
 
          <option value="28">28</option> 
 
          <option value="30">30</option> 
 
         </select> 
 
        <select id="fWeight" name="fonts"> 
 
         <option value="bold">Bold</option> 
 
         <option value="normal">normal</option> 
 
        </select> 
 
        <input type= "button" id = "i" value = "Italics"><br><br> 
 
        <input type= "button" id = "chnage" value = "Make Change"> 
 
        <input type= "button" id = "dLastP" value = "Delete Last Paragraph"> 
 
        </div> 
 
       </div> 
 
       <div class = "hide" id = "fullStory"> 
 
        <p>I lived in Africa for sixteen years, but the four years I have spent in United States 
 
        have taught me more the previous sixteen years I did in Africa, so much more. 
 
        SomDue to our unique presentation methods and this book's modular organization, 
 
\t \t \t this is the right book for any web developer who wants to use JavaScript effectivelytes, the better I will become.</p></div> 
 
       
 
       <div class = "thougharea" id = "addNote"> 
 
        <div class= "style"> 
 
         <select class = "fontFamily" id="fontFamily"> 
 
          <option value="arial">Arial</option> 
 
          <option value="arial black">Arial Black</option> 
 
          <option value="book antiqua">Book Antiqua</option> 
 
          <option value="geneva">Geneva</option> 
 
          <option value="georgia">Georgia</option> 
 
          <option value="helvetica">Helvetica</option> 
 
          <option value="linotype">Linotype</option> 
 
          <option value="lucida sans unicode">Lucida Sans Unicode</option> 
 
          <option value="lucida grande">Lucida Grande</option> 
 
          <option value="palatino">Palatino</option> 
 
          <option value="sans-serif">Sans Serif</option> 
 
          <option value="serif">Serif</option> 
 
          <option value="tahoma">Tahoma</option> 
 
          <option value="trebuchet ms">Trebuchet MS</option> 
 
          <option value="times">Times</option> 
 
          <option value="times new roman">Times New Roman</option> 
 
          <option value="verdana">Verdana</option> 
 
         </select> 
 
         <select class ="fontSize" id = "fontSize"> 
 
          <option value="8">8</option> 
 
          <option value="10">10</option> 
 
          <option value="12">12</option> 
 
          <option value="14">14</option> 
 
          <option value="16">16</option> 
 
          <option value="18">18</option> 
 
          <option value="20">20</option> 
 
          <option value="22">22</option> 
 
          <option value="24">24</option> 
 
          <option value="26">26</option> 
 
          <option value="28">28</option> 
 
          <option value="30">30</option> 
 
         </select> 
 
        <select class ="fontWeight" id = "fontWeight"> 
 
          <option value="bold">Bold</option> 
 
          <option value="normal">Normal</option> 
 
        </select> 
 
         <input type= "button" id = "itali" value = "Italics"> 
 
        </div> 
 
        <textarea class ="textarea" id= "textarea">Enter some text</textarea> 
 
        <div class= "buttions"> 
 
         <input type= "button" id = "before" value = "Append At B"> 
 
         <input type= "button" id = "after" value = "Append At A"> 
 
         <input type= "button" id = "delete" value = "Delete Last Paragraph"> 
 
        </div> 
 
       </div> 
 
       <div></div> 
 
       <div class ="add"> 
 
        <nav id="thing"> 
 
         <a id ="tools" href="#" data-target ="#addNote" style="text-decoration: none">Add Though</a> 
 
        </nav> 
 
       </div> 
 
      </article> 
 
      <h1> <a id="career">Career and Opportunity</a></h1> 
 
      <article> 
 
       <div id ="edu"> 
 
        <span id ="caree"></span> 
 
        <p>Hav 
 
        has taught me a negative can turn into a positive experience. I immigrated 
 
        
 
      </article> 
 
      
 
     </section> 
 
    </body> 
 
</html>

これは私がこれまで持っているものです。しかしh1要素の選択だけです。

$("section h1 a").slice().hide().first().show(); 
$("section article").slice().hide().first().show(); 

$('#nlist a').on('click', function(e) { 
    e.preventDefault(); 
    var $link = $(this); 
    var href = $link.attr('href'); 
    href = href.substring(1); 
    $('section h1 a').each(function() { 
     var $a = $(this); 
     var id = $(this).attr('id').toLowerCase(); 
     if (id === href) { 
      $a.show(); 
     } else { 
      $a.hide(); 
     } 
    }); 
    $('section article').each(function() { 
     var isTrue = false; 
     $(this).children().each(function() { 
      var text = $(this).text().toLowerCase(); 
      console.log(text); 
      if (text.indexOf(href) !== -1) { 
       isTrue = true; 
      } 
     }); 
     if (isTrue) { 
      $(this).show(); 

     } else { 
      $(this).hide(); 
     } 
     isTrue = false; 
    }); 
}); 

私は、問題はここから来ている>誰かが

を私を助けることができるホッピングました。 divの で記事を選択していません。

$('section article').each(function() { 
     var isTrue = false; 
     $(this).children().each(function() { 
      var text = $(this).text().toLowerCase(); 
      console.log(text); 
      if (text.indexOf(href) !== -1) { 
       isTrue = true; 
      } 
     }); 
     if (isTrue) { 
      $(this).show(); 

     } else { 
      $(this).hide(); 
     } 
     isTrue = false; 
    }); 
}); 

Answer 1

あなたは記事のテキストのhrefを探しているように見えるが、hrefが記事へ前の要素です。 これで問題は解決しますか？

$('section article').each(function() { 
    var h1Link = $(this).prev().attr("id"); 
    if(h1Link==href){ 
     $(this).show(); 
    }else{ 
     $(this).hide(); 
    } 
});