javascript单击时显示带有Nav链接的子级

Question

I have this code, and when I click on story or career, I want it to get the h1, and also the div and display the paragraph or information for that link. 我有这段代码，当我单击故事或职业时，我希望它获得h1以及div并显示该链接的段落或信息。 So far it's only displaying the h1, and not the div or other information associated with that link. 到目前为止，它仅显示h1，而不显示div或与该链接关联的其他信息。

 $(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> <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 single book! Fast-paced, professional, and packed with expert practices, our 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, 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>

This is what I have so far. 到目前为止，这就是我所拥有的。 But it's only selecting the h1 element. 但这只是选择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; }); });

I was hopping someone can help me out 我希望有人可以帮助我

> The problem is coming from here. >问题出在这里。 It's not selecting the article with the div. 它不是选择带有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

You appear to be looking for the href in the article text but the href is the previous element to the article. 您似乎在文章文本中寻找href，但是href是文章的前一个元素。 Does this fix the problem? 这样可以解决问题吗？

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

javascript单击时显示带有Nav链接的子级

问题描述

1 个解决方案

解决方案1
0 2016-11-30 04:48:40

javascript单击时显示带有Nav链接的子级

问题描述

1 个解决方案

解决方案1 0 2016-11-30 04:48:40

解决方案1
0 2016-11-30 04:48:40