我有这个代码，当我点击故事或职业时，我希望它获得h1，以及div并显示该链接的段落或信息。到目前为止，它只显示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>
这是我到目前为止所拥有的。但它只选择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; }); });我在跳人，可以帮助我
＆GT;问题来自这里。它没有选择文章 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; }); });
答案 0 :(得分：0)
您似乎在文章文本中寻找href，但href是文章的前一个元素。 这样可以解决问题吗？
$('section article').each(function () {
var h1Link = $(this).prev().attr("id");
if(h1Link==href){
$(this).show();
}else{
$(this).hide();
}
});