• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

JavaScript Headlines auflisten

T

topias

New member
Hallo,

ich probiere diesen Code zum Fliegen zu bringen.. klappt gerade aber nicht so.


Auf sbin.com wird in er Console ein Fehler angezeigt:

"error"
"Ungültiges Zeichen (line 4)"

Aber in Zeile 4 steht doch nur normaler HTML-Kram..

Der Code soll folgendes machen: Die Headlines eines Dokumentes auflisten, um ein langes Dokument übersichtlich zu machen. Soll in SharePoint verwendet werden, aber ist an dieser Stelle wohl egal, oder?

Hat von euch jemand ne Idee, woran es liegen könnte?

Vielen Dank!!


Code: 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<!-- SharePoint WIKI Table of Contents. Sunnyape, August 2013 -->
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
<script type="text/javascript">
function hideTOC() {
 document.getElementById("theTOC").style.display = 'none';
 document.getElementById("show").style.display = 'block';
 document.getElementById("hide").style.display = 'none';
}
</script>
<script type="text/javascript">
function showTOC() {
 document.getElementById("theTOC").style.display = 'block';
 document.getElementById("show").style.display = 'none';
 document.getElementById("hide").style.display = 'block';
}
</script>
 
<div id="wikiTOC">
<table style="padding: 5px;"><tr>
 <td><div class="TOCheader">Table of Contents</div></td>
 <td>
  <div class="closehide" id='hide'>[<a href='#' title='Click to hide' onClick="hideTOC()">hide</a>]</div>
  <div class="closehide" id='show'>[<a href='#' title='Click to show' onClick="showTOC()">show</a>]</div>
 </td>
</tr></table>
<div id='theTOC'>
<script type="text/javascript">
$(document).ready(function(){
 var L2=0, L3=0, L4=0;
$(“.ms-wikicontent h1, .ms-wikicontent h2, .ms-wikicontent h3, .ms-wikicontent h4?).each(function(i){
theLevel=$(this).get(0).tagName;
   if (theLevel=="H2") {
   L2=L2+1;
   L3=0;
   L4=0;
   theLevelString=""+L2;
   }
  else if (theLevel=="H3") {
   L3=L3+1;
   L4=0;
   theLevelString=""+L2+"."+L3;
   }
  else {
   L4=L4+1;
   theLevelString=""+L2+"."+L3+"."+L4;
   }
  $(this).attr("id", "heading_" + i);
  $("#theTOC").append("<a href='#heading_" + i + "' title='" + theLevel + "'>" + theLevelString + " " + $(this).text() + "</a><br />");
 });
});
hideTOC();
</script>
</div>
</div>
 
<style>
#wikiTOC {border: 1px black dashed; background-color: whitesmoke; float: left; padding: 10px; padding-top: 0px;}
#wikiTOC .TOCheader {font-size: 1.1em; font-weight: bold; text-align: center; padding: 5px;}
#wikiTOC .closehide {font-size: 11px; font-weight: normal;}
#wikiTOC a[title=H2] {font-size:12px; font-weight: normal;}
#wikiTOC a[title=H3] {font-size:11px; font-weight: normal; margin-left: 8px;}
#wikiTOC a[title=H4] {font-size:10px; font-weight: normal; margin-left: 16px;}
</style>
</head>
<body>
<h2>sfsdfsdfsdf</h2>
</body>
</html>
 
<a href='#' title='Click to hide' onClick="hideTOC()">hide</a>: Es heißt onclick (mit kleinem c) und das href='#' ist einfach gesagt Blödsinn.

$(“.ms-wikicontent h1, .ms-wikicontent h2, .ms-wikicontent h3, .ms-wikicontent h4?) Hier ist die Selektordefinition falsch, denke sollte wohl so sein $('.ms-wikicontent h1, .ms-wikicontent h2, .ms-wikicontent h3, .ms-wikicontent h4'), wobei vom Gefühl her auch das reichen könnte: $('.ms-wikicontent')

var L2=0, L3=0, L4=0; würde ich innerhalb der anonymen Funktion der .each()-Methode definieren, da diese ja auch nur dort benötigt werden. Ausserdem sparst du dir dann immer dieses zurücksetzten auf 0.

Dein Beispieldokument kann nicht funktionieren, da dort keine HTML-Elemente sind die eine Klasse ms-wikicontent haben:
HTML: 
<body>
    <h2>sfsdfsdfsdf</h2>
</body>


$("#theTOC").append(...); Kann nicht funktionieren, weil in deinem HTML kein Element mit der ID theTOC vorhanden ist, siehe oben.


Aber trotz allem sieht dein eingeschlagener Weg etwas zu kompliziert aus. Zeig doch mal ein Beipiel mit loremipsum-Text von mir aus, damit man mal schauen kann was du vor hast...
 
Zuletzt bearbeitet:
miniA4kuser schrieb:
wobei vom Gefühl her auch das reichen könnte: $('.ms-wikicontent')
Zum Vergrößern anklicken....
Aber er will doch die Überschriften haben...
miniA4kuser schrieb:
var L2=0, L3=0, L4=0; würde ich innerhalb der anonymen Funktion der .each()-Methode definieren, da diese ja auch nur dort benötigt werden. Ausserdem sparst du dir dann immer dieses zurücksetzten auf 0.
Zum Vergrößern anklicken....
Nein, das würde nicht funktionieren. Die Überschriften sollen ja durchnummeriert werden. Sonst würde jede Überschrift ja die gleiche Nummer bekommen.

@topias:
Das ungütige Zeichen ist hier:
topias schrieb:
Code: 
$(“.ms-wikicontent h1, .ms-wikicontent h2, .ms-wikicontent h3, .ms-wikicontent h4?)
Zum Vergrößern anklicken....
Du darfst JS oder auch anderen Code nicht mit einem Editor schreiben, der dir die " automatisch durch typographisch "richtige" Zeichen ersetzt (du siehst, dass die Gänsefüßchen etwas schräg sind).

- - - Aktualisiert - - -

K.A. was das sbin.com ist, aber anscheinend hat es massive Probleme mit dem Zeilenzählen. Verwende besser die Fehlerkonsole.
 
Danke für all die Antworten! Leider klappt es noch nicht, aber...: Mit Firebug habe ich vielleicht einen Hinweis bekommen:

JS-Fehler:

SyntaxError: syntax error %3Clink-to-jquery%3E:2
ReferenceError: $ is not defined Abschlusspr%c3%bcfungen.aspx:656

Wenn $ nicht definiert ist, kann es nicht funktionieren, oder? Woran könnte das liegen? Es werden sonst nur noch ein paar CSS-Warnungen ausgegeben...

Vielen, vielen Dank für euer Hilfe!

- - - Aktualisiert - - -

ja genau, meinte JS Bin - Collaborative JavaScript Debugging
 
$ is not defined erscheint als Fehlermeldung wenn jQuery nicht ordnungsgemäß geladen wurde.
Entweder ist der Pfad zu jQuery falsch oder es wird zu spät eingebunden.
Am Besten ist, wenn du jQuery als erstes JavaScript einbindest.
 
Es geht! Kaum bindet man jQuery richtig ein...

Danke für die Tipps! Das Script funktioniert ansonsten.

Gruß
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben