0
Ich habe diesen Code, und wenn ich auf Geschichte oder Karriere klicken, möchte ich, dass die h1, und auch die Div und zeigen Sie den Absatz oder Informationen für diesen Link. Bis jetzt zeigt es nur die h1 und nicht die div oder andere Informationen, die mit dieser Verbindung verbunden sind.Javascript Zeigen Kinder mit Nav-Link, wenn Sie klicken
$(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>Das ist, was ich bisher haben. Aber es wählt nur das h1-Element.
$("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; }); });Ich hüpfte mir jemand
helfen kann> Das Problem von hier kommt. Es wählt nicht den Artikel mit der div aus.
$('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; }); });
Können Sie bitte bearbeiten und markieren, welcher Teil nicht funktioniert und was ist der Fehler, den Sie sehen. Es ist nicht möglich, den gesamten Code zu debuggen. Auch css ist irrelevant in dieser Frage – brk
Ich habe es aktualisiert, um zu zeigen, wo das Problem von – Jabateh
kommt Also, wenn thew "Artikel" nicht html "Text" hat genau die gleiche href wie der angeklickte Link sollte es sonst verstecken zeigen? Haben Sie den Linktext im Nicht-HTML-Text des Artikels? –