String-Pfad aus einer Klicksequenz generieren

jamrobin.

Ich erzeuge verschachtelte div-Elemente basierend auf einer Objektstruktur. Mit einem Klick auf das Elternteil können Sie die Kinder umschalten.

Nun möchte ich einen durch Schrägstriche getrennten Pfad der Klickfolge und der "selektierten" Elemente generieren. Wenn der Benutzer auf Lesen -> Nachrichten -> Sport klickt, sollte der Zeichenfolgenpfad "lesen/Nachrichten/Sport" lauten. Wenn der Benutzer jetzt auf lesen -> Bücher klickt, sollte der Pfad jetzt "lesen/bücher" sein

Hier ist meine aktuelle Version: https://codepen.io/iamrbn/pen/yEqPjG

let path = "";

let object = {
  "design": {
    "inspiration": {},
    "news": {}
  },
  "read": {
    "news": {
      "sport": {}
    },
    "books": {}
  },
	"code": {}
}

let categoryContainer = document.querySelector(".categoryContainer")

function categoryTree(obj, parent, start = true) {
  for (var key in obj) {
    let div = document.createElement("div");
    div.textContent = key;
	 div.classList.add("category");
    if (parent.children) parent.className += " bold";
    if (!start) div.className = "normal hide category";

    div.addEventListener('click', function(e) {
      e.stopPropagation()
		this.classList.toggle('active');
      Array.from(div.children).forEach(child => {
        child.classList.toggle('hide');
      })
    })
    categoryTree(obj[key], div, false)
    parent.appendChild(div)
  }
}


categoryTree(object, categoryContainer)
.category {
	color: black;
	display: block;
	line-height: 40px;
	background-color: RGBA(83, 86, 90, 0.2);
	margin: 8px;
}

.category .category {
	display: inline-block;
	margin: 0 8px;
	padding: 0 8px;
}

.category.hide {display: none;}
.category.normal {font-weight: normal;}
.category.bold {font-weight: bold;}
.category.active {color: red;}
<div class="categoryContainer"></div>

Daniel Beck

Hier ist ein Ansatz. Ihr vorhandener Code ist unverändert, mit Ausnahme des Hinzufügens eines Aufrufs zur neuen getParents()Funktion, die durch rekursives Crawlen des DOM-Baums funktioniert, um den "Pfad" zum angeklickten Knoten zu generieren:

let path = "";

let object = {
  "design": {
    "inspiration": {},
    "news": {}
  },
  "read": {
    "news": {
      "sport": {}
    },
    "books": {}
  },
  "code": {}
}

let categoryContainer = document.querySelector(".categoryContainer")

function categoryTree(obj, parent, start = true) {
  for (var key in obj) {
    let div = document.createElement("div");
    div.textContent = key;
    div.classList.add("category");
    if (parent.children) parent.className += " bold";
    if (!start) div.className = "normal hide category";

    div.addEventListener('click', function(e) {
      e.stopPropagation()
      this.classList.toggle('active');
      Array.from(div.children).forEach(child => {
        child.classList.toggle('hide');
      })
      var thePath = getParents(e.target); // <--- new
      console.log(thePath)
    })
    categoryTree(obj[key], div, false)
    parent.appendChild(div)
  }
}

function getParents(node, path) {
  // Cheat a bit here: we know the textnode we want is the first child node, so we don't have to iterate through all children and check their nodeType:
  let thisName = node.childNodes[0].textContent;
  path = path ? (thisName + "/" + path) : thisName ; 
  // iterate to parent unless we're at the container:
  if (node.parentNode.className.split(/\s+/).indexOf("categoryContainer") !== -1) {
    return path;
  } else {
    return getParents(node.parentNode, path);
  }
}

categoryTree(object, categoryContainer)
.category {
  color: black;
  display: block;
  line-height: 40px;
  background-color: RGBA(83, 86, 90, 0.2);
  margin: 8px;
}

.category .category {
  display: inline-block;
  margin: 0 8px;
  padding: 0 8px;
}

.category.hide {
  display: none;
}

.category.normal {
  font-weight: normal;
}

.category.bold {
  font-weight: bold;
}

.category.active {
  color: red;
}
<div class="categoryContainer"></div>

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am
0

Lass mich ein paar Worte sagen

0Kommentare
LoginNach der Teilnahme an der Überprüfung

Verwandte Artikel

Pfad aus einer Gruppe

Generieren Sie QueryBuilder aus einem gepunkteten Pfad

Generieren Sie JSON aus Dictionary <Pfad, Wert>

Programmgesteuert URL aus Pfad und Parametern generieren

Generieren einer Datei aus einem base64-String

Generieren einer Stata-Datumsvariable aus ISO-Datetime-String

Generieren zufälliger eindeutiger Elemente aus einer String-Liste

Generieren Listen aus einer Liste

Generieren einer Tabellenausgabe aus jq

Generieren einer Zufallszahl aus Benutzereingaben

Generieren einer Zufallsstichprobe aus einer Exponentialverteilung in Stata

Generieren einer Liste aus einer Textdatei in PHP

Generieren einer Fettbibliothek aus einer statischen Bibliothek

Schlüssel aus String generieren?

Generieren von Regex zum Ausschließen einer Zeichenfolge im Pfad

Wie kann ich eine List<KeyValuePair<string, int>> generieren, die aus Gruppierungen einer anderen Liste besteht?

Generieren Sie einen String-Satz aus einer CSV-Datei in Python

Absoluter Pfad aus relativem Pfad und einer Ankerdatei in PHP

Erstellen einer Zeichenfolge aus einem Pfad

Kürzester bitonischer Pfad aus einer Hand

Generieren einer Tabelle aus einem Objektarray

Kann Roslyn Quellcode aus einer Objektinstanz generieren?

Entität aus einer vorhandenen Tabelle generieren

Entitäten aus einer vorhandenen Datenbank generieren

Scala: Generieren von Tupeln aus einer Liste

Ketten aus einer Reihenfolge von Listen generieren

Generieren mehrerer Spalten aus einer Doppeltabelle

R, Generieren einer Datenrahmenzeile aus Faktorwerten

Generieren Sie eine Adjazenzmatrix aus einer Karte

TOP Liste

  1. 1

    Wie aktualisiere ich ein Feld in einer Raumdatenbank mit einem Repository und einem Ansichtsmodell?

  2. 2

    Wie füge ich mehrere Spalten in einer Spalte mit derselben Tabelle in SQL Server zusammen?

  3. 3

    Wie kann man Gitterquadrate dazu bringen, die Farbe zu ändern?

  4. 4

    Ich kann nicht verstehen, wie man Go-Code in mehreren Dateien kompiliert

  5. 5

    Zählen Sie die Vorkommen jedes Werts in einem Tupel in Python

  6. 6

    Gibt es eine sauberere Möglichkeit, Konstruktorargumente und Instanzeigenschaften einer Klasse in Typescript zu definieren?

  7. 7

    So implementieren Sie Pushwoosh mit ionic 2

  8. 8

    Wie wird der Wert im Dropdown-Menü basierend auf den ausgewählten Daten / IDs angezeigt?

  9. 9

    Tomcat - Leiten Sie den alten Kontextstamm zum neuen Kontextstamm um

  10. 10

    Ändern Sie den Knotenpfad in das aktuelle Verzeichnis

  11. 11

    So erstellen Sie ein Array von Objekten aus zwei Arrays von Objekten mit einem gemeinsamen Schlüssel - JavaScript

  12. 12

    Rufen Sie die ID aus der Datagrid-Ansicht ab und zeigen Sie die Daten in Textfeldern einem anderen Formular an

  13. 13

    base js: Wie füge ich einem Objekt eine Eigenschaft auf die 'alte' Weise hinzu?

  14. 14

    Ersetze einen Teil einer Zeichenfolge durch eine Pandas-Spalte als Muster

  15. 15

    Blättern Sie auf Radio Click zur Abschnitts-ID

  16. 16

    CBCentralManager wird nach dem Verbinden neu gestartet

  17. 17

    Scherz, wie man eine Funktion verspottet, die von einer verspotteten Funktion zurückgegeben wird

  18. 18

    django-allauth Empfängersignal zum Hinzufügen einer Gruppenberechtigung zum Benutzer bei der Anmeldung

  19. 19

    Tic Tac Toe-Spiel im React-Reset-Button funktioniert nicht

  20. 20

    AQL: Teilweise Übereinstimmung in einer Reihe von Zeichenfolgen

  21. 21

    So summieren Sie die Werte zweier Tabellen und gruppieren sie nach Datum

heißlabel

Archiv