ersetzen der Inhalt des div mit einem anderen Inhalt

Ich haben den Bau einer Liste von links, alle von denen sollten ändern Sie den Inhalt von einem div eine andere spezifische Inhalte (etwa 4 Linien von Sachen: name, website, Kontakt, etc.) nach einem Klick.

Fand ich diesen code:

<script type="text/javascript">
    function ReplaceContentInContainer(id,content) {
        var container = document.getElementById(id);
        container.innerHTML = content;
    }
</script>

und verwendet es so:

<li class="pl11">
    <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>')">Pomorskie</a>
</li>

Und es nicht funktioniert, als ich erwartet hatte.

Es ändert hyperlinks text von 'Pommern' in 'superlink'.

Den plain-text funktioniert Prima, aber ich brauche links.

hier ist die http://xn--pytyfundamentowe-jyc.pl/projektanci/kontakty-p/ (nur zwei von Ihnen alles zeigen)

, Aber nach dem Versuch alle Eure Empfehlungen, ich denke, ich würde springen, um verschiedene divs, die mit # - links, zu nichts gearbeitet mit :/

Vielen Dank für den Versuch, und prost 🙂

können Sie fügen Sie den code für die wojewodztwo Objekt?
Können Sie ein Beispiel für eine vor und nach für Sie aus, wie die links angezeigt werden?
wojewodztwo ist nur ein div, die gehen, um ersetzt werden: '<div id="wojewodztwo"></div>'
Dein HTML ist invalid, er müsste <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href=&qout;http://address.com&qout;>superlink</a>')"> (beachten Sie die Anführungszeichen escaped)
Beispiel: wir haben 3 links: link1 (inhalt1) link2 (content2) link3 (content3) alle Inhalte, auf die aus nameX, addressX und hyperlinkX hier <div id="wojewodztwo"></div> die Inhalte sollten ersetzt werden mit contentX auf einen Klick 🙂
" ist nicht entgangen, es ist eine entity-Referenz. \" ist entkommen, und %22 ist url-kodiert.

InformationsquelleAutor John Alabama | 2012-12-20

6

Nur als komplett-seitlich Blick auf diese, ich würde vorschlagen, Vermeidung der Verschachtelung Verrücktheit /Komplexität und reduziert das problem.

Setup die Inhalte in einem versteckten (ie. <div id="replacements">...</div>) Greifen die innerHTML aus dem Knoten, den Sie wollen, und mit ihm getan werden.

Viel einfacher, Ersatz-Inhalte von nicht-devs auch so, irgendwie funktioniert großartig, wenn Sie in einem team.
```
//Probably better in a separate helpers.js file.
   function replaceContentInContainer(target, source) {
      document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
   }
```
Steuern Sie mit: (verlieren, dass href=javascript: und verwenden onClick, besser als event-handler, aber für die Kürze, ich werde die inline-es als onClick-Attribut hier, und verwenden Sie eine Schaltfläche.)
```
<button onClick="replaceContentInContainer('target', 'replace_target')">Replace it</button>
```
Haben wir unser Ziel irgendwo in das Dokument.
```
<div id="target">My content will be replaced</div>
```
Dann die Ersatz-Inhalte sitzt, verbirgt sich im inneren ein Ersatz div.
```
<div id="replacements" style="display:none">
  <span id="replace_target"><a href="http://address.com">superlink</a></span>
</div>
```
Hier ist es in JSBin

Verbesserung der dynamischen Natur dieser durch die Verwendung LENKER oder andere nette JS-Template-library, aber das ist eine übung für die OP.

edit: Beachten Sie, sollten Sie auch Namen, Funktionen mit einem vorangestellten Kleinbuchstaben, und uns den führenden Großbuchstaben Stil für Klassennamen z.B. var mySweetInstance = new MySpecialObject();
- OMG ES FUNKTIONIERT, '<script type="text/javascript"> function ReplaceContentInContainer(id,id2) { var container = document.getElementById(id); var container2 = document.getElementById(id2); container.innerHTML = container2.innerHTML;} </script>'
- Siehe meine bearbeitete version, (auch auf JSBin)
- Immer versuchen zu abstrahieren / Dereferenzierung ("Teile und herrsche", wenn Sie möchten), um Probleme zu lösen, Sie werden nur leichter, je mehr Sie verschiedene Dinge aus, und es fühlt sich alles angenehmer, wenn Sie zu Ihr zurückkehren.
InformationsquelleAutor ocodo
4

Anführungszeichen Stimmen nicht überein! Also, wenn Sie klicken, erhalten Sie einen JavaScript-Fehler.

Browser sieht diese Zeichenfolge:
```
href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>')">Pomorskie<
```
als:
```
href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="
```
Chnage " von innen zu @quot;
```
<li class="pl11">
    <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href=@quot;http://address.com@quot;>superlink</a>')">Pomorskie</a>
</li>
```
Beispiel fiddle.

Beachten Sie auch, mit dem href-tag für JavaScript ist eine SCHLECHTE Praxis.
- +1 für die Verwendung des "href" für JavaScript ist eine SCHLECHTE Praxis.
- +1 für denken außerhalb der angegebenen URL und in Anbetracht Leerzeichen. Ich entfernte meine Antwort. Obwohl es funktioniert, ohne die " mit der OP wird die URL war nicht ganz richtig ist, wie du richtig hingewiesen. Wie du schon bedeckt es jetzt gibt es für mich keine Notwendigkeit, wiederholen die gleiche Sache in einer anderen Antwort. Schönen Fang.
- danke Jungs, nichts hilft obwohl, ich bearbeitet die Frage, und ich bin gonna legte Sie zur Ruhe, denke ich. PROST!
InformationsquelleAutor epascarello
0

Hast du ein problem mit verschachtelten Zitaten. Werfen Sie einen Blick in Ihre DOM-Inspektor, um zu sehen, was HTML-parser gebaut aus! (in diese demo, zum Beispiel)

Benötigen Sie entweder HTML-escape-Anführungszeichen innerhalb der Attribut als " oder " oder konvertieren Sie Sie in Apostrophe und entfliehen Sie in den JS-string mit backslashes:
```
<a href="j[…]r('wojewodztwo', '<a href=&quot;http://address.com&quot;>superlink</a>')">…
<a href="j[…]r('wojewodztwo', '<a href=\'http://address.com\'>superlink</a>')">…
```
Finden Sie unter arbeiten demos hier und hier.

Besser, sollten Sie eine onclick - Attribut statt eines javascript-pseudo-url:
```
<a onclick="ReplaceContentInContainer('wojewodztwo', …)">Pomorskie</a>
```
oder sogar ein javascript-event-handler registriert:
```
<li class="pl11">
    <a id="superlink">Pomorskie</a>
</li>
<script type="text/javascript">
    function replaceContentInContainer(id,content) {
        var container = document.getElementById(id);
        container.innerHTML = content;
    }
    document.getElementBId("superlink").onclick = function(event) {
        replaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>');
        event.prevenDefault();
    };
</script>
```
(demo)
- funktioniert Super in der demo! nur werde versuchen diese in meinem Fall in einer sec 🙂 vielen Dank!
- ok, es funktioniert nicht für mich :/ danke für Eure Hilfe. Ich denke, ich werde gehen mit der #links das springen zu verschiedenen divs anstatt Sie zu ersetzen eine. vielen Dank und cheers!
- Wow, ich bin ein bisschen fassungslos, die entkommen \" gibt, die nicht in diesem Zusammenhang.
- yup, ich versuche mit der einen, die am meisten nach Norden (auf der Karte)
- ja, ich hatte das Gefühl, ein bisschen besorgt über die Verwendung von \' auch, wenn es funktioniert hat, würde ich darum kümmern (vielleicht gebrochen, in einem anderen (zukünftigen?) JS-engine, und super schwer zu finden/Debuggen.) Wenn es darauf ankommt, das wäre besser mit ein bisschen mehr Dereferenzierung, so können Sie Komponieren das anchor-element in einem weniger spröde Mode.
- funktioniert nicht, wie es noch kollidiert mit dem Attribut Trennzeichen, die Sie verwenden müssen Entitäten im HTML-Code (Backslash funktioniert nicht).
- Ich weiß, ich versuchte es, ich war nur ein wenig überrascht. Aber diese Art von Reifen zu springen, sollte nur insgesamt vermieden werden. siehe meine Antwort.
- Besser vermeiden Sie es durch die Trennung von Inhalt und Verhalten, D. H. legen Sie Sie alle in ein eigenes script (Datei) tag.
- Ich meine, vermeiden verschachteln von Zitaten, die alle über den Ort wegen zu viel inlining.
InformationsquelleAutor Bergi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.