Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
class über diverse For-Schleifen und if-Bedingungen ansprechen
#1
Hallo zusammen,

ich bin in der JS-Welt noch recht frisch und unbeholfen und komme bei einem Problem einfach irgendwie nicht weiter, was mit ziemlicher Sicherheit an einer Wissenslücke meinerseits liegt. Da ich mir entsprechende Kenntnisse gerade noch erarbeite und wer weiß wie weit von der Lösung entfernt bin, bin ich etwas frustriert. Es wäre schön, wenn mir jemand weiterhelfen könnte...

Nun zum eigentlichen Problem...es handelt sich um folgenden Code:

Code:
<div id="DMW">
        <div id="DD">
            <button id="Index" class="accordion" onclick="ShowSlides(undefined,'A1');return false">Digitale Dienstleistungen</button>
                <div class="panel">
                    <div class="slideshow-container">
                
                        <div class="mySlides fade DMW_A1" style="display: none;height:400px;overflow-y: auto;">
                            <div class="text">Januar</div>
                            <div class="text1"></div>
                        </div>
                            
                        <div class="mySlides fade DMW_A1" style="display: none;height:400px;overflow-y: auto;">
                            <div class="text">Februar</div>
                            <div class="text1"></div>


Dieser wiederholt sich ungefähr 10 (Segmente) mal. Mit einer Funktion möchte ich die einzelnen Segmente ansprechen. Also erst id="DD" (Segment) auswählen, dann die class="accordion" mit dem HTML-Inhalt "Digitale Dienstleistungen" finden und mit einem Listeneintrag (var schwerpunktList) vergleichen, bei Übereinstimmung dann die class="text" mit dem HTML-Inhalt "Januar" finden und mit einem Listeneintrag (var monatList) vergleichen und letztendlich bei Übereinstimmung von diesen Werten in die class="text1" einen Text einfügen. Dazu habe ich die folgende Funktion geschrieben:
Code:
function onQuerySucceeded(sender, args) {

   var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
    var group = document.getElementById("DD");
    var akkordion = group.getElementsByClassName("accordion");
    var akkordionTest = document.getElementsByClassName("accordion");
    
    
    while (listItemEnumerator.moveNext()) {    
        for (i = 0; i < akkordion.length; i++){                                    
            var oListItem = listItemEnumerator.get_current();
            var schwerpunktList = oListItem.get_item('Schwerpunkt');
            
            if (schwerpunktList == akkordion(i).innerHTML){                        //Wenn Schwerpunkt aus Liste dem Schwerpunkt des Akkordions entspricht
                var monat = group.getElementsByClassName("text");
                
                for (j = 0; j < monat.length; j++){                                //Liest alle Monate des Akkordions ein
                    var monatList = oListItem.get_item('Monat');
                    
                    if(monatList == monat(j).innerHTML){                        //Wenn Monat aus Liste dem Monat des Akkordions des Schwerpunkts entspricht
                        var auswertList = oListItem.get_item('Auswertung');    
                        var ausgabe = group.getElementsByClassName("text1")(j);
                        ausgabe.innerHTML = auswertList;                        //Schreibe in Textbereich des Akkordions-Monat
                    }
                }
            }
        }    
    }
}


Soweit läuft diese auch, allerdings bekomme ich die class="text" nicht sauber angesprochen. Die Funktion findet diese class, aber schreibt dann den Text in alle class (da diese ja auch mehrfach verwendet wird). Logisch betrachtet, müsste ich var ausgabe auf akkordion(i) beziehen. Also var ausgabe = akkordion(i).getElementsByClassName("text1")(j). Geht aber nicht. Ich weiß nicht, ob es einfach nur blöd gebaut ist von mir oder ob ich eine Kleinigkeit übersehen habe oder nicht weiß...Über eure Ideen oder Lösungsansätze würde ich mich sehr freuen.

Und wenn eure Ideen/Lösungsansätze ohne den Bezug auf die id="DD" auskommen würde, wäre es ideal...

Ich hoffe ich habe genug Details angegeben, um es euch verständlich darzulegen!?

Besten Dank schon mal vorab.

Viele Grüße

Andreas
Zitieren
#2
Ich komme mit den Teil Code nicht weit .Kannst du mal das ganze Script posten ? Nachdem was du sagst würde ich das mit eindeutigen classnamen machen oder anders.Nur leider kann ich jetzt nix testen weil bei deinen Code einiges Fehlt zum Testen bzw umschreiben
Zitieren
#3
Hi Basti,

danke das du helfen magst. Der Teil Code liest aus einer Liste eine Reihe von Werten aus. Da du die Liste nicht sehen kannst, wird dir auch das komplette Script nichts nützen. Das Auslesen der Liste funktioniert soweit ganz reibungslos. Für einen einfachen Test kann man aber auch durch einfache Werte ersetzen:

Bspw.
Im ersten Durchlauf (while-Schleife):
var schwerpunktList = "Digitale Dienstleistung";
var monatList = "Januar"
var auswertList = "lore ipsum";

im zweiten Durchlauf (while-Schleife):
var schwerpunktList = "Digitale Dienstleistung";
var monatList = "Februar"
var auswertList = "lore ipsum---vertitnjk";

etc.

Die Funktion (code) vergleicht den Inhalt der Variable schwerpunktList mit dem Inhalt von className = "accordion" (z.B. Digitale Dienstleistungen), wenn die Funktion etwas gefunden hat, vergleicht sie den Inhalt der Variable monatList mit dem Inhalt von classname = "text" (z.B. "Januar"). Wenn auch dieser Inhalt übereinstimmt, soll die Funktion in classname "text1" den Inhalt der Variable auswertList ("lore ipsum") einfügen, welche direkt nach der geprüften classname "text" (Januar) folgt.

Hier dennoch mal die komplette Funktion:

Code:
//-------------------------------------Liste auslesen

var siteUrl = 'https://....../Testseite/';
var listTitle = 'DMW-Liste_Test_V2';
var camlString = '<ViewFields><FieldRef Name=\'Title\'/><FieldRef Name=\'Kategorie\'/><FieldRef Name=\'Schwerpunkt\'/><FieldRef Name=\'Zeitraum\'/><FieldRef Name=\'Auswertung\'/><FieldRef Name=\'Monat\'/></ViewFields>';

function retrieveListItems() {

   var clientContext = new SP.ClientContext(siteUrl);
   var oList = clientContext.get_web().get_lists().getByTitle(listTitle);
       
   var camlQuery = new SP.CamlQuery();
   camlQuery.set_viewXml(camlString);
   this.collListItem = oList.getItems(camlQuery);
       
   clientContext.load(collListItem);
       
   clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));        
       
}

function onQuerySucceeded(sender, args) {

   var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
    var group = document.getElementById("DD");
    var akkordion = group.getElementsByClassName("accordion");
    var akkordionTest = document.getElementsByClassName("accordion");
    
    
    while (listItemEnumerator.moveNext()) {    
        for (i = 0; i < akkordion.length; i++){                                    
            var oListItem = listItemEnumerator.get_current();
            var schwerpunktList = oListItem.get_item('Schwerpunkt');
            
            if (schwerpunktList == akkordion(i).innerHTML){                        //Wenn Schwerpunkt aus Liste dem Schwerpunkt des Akkordions entspricht
                var monat = group.getElementsByClassName("text");
                
                for (j = 0; j < monat.length; j++){                                //Liest alle Monate des Akkordions ein
                    var monatList = oListItem.get_item('Monat');
                    
                    if(monatList == monat(j).innerHTML){                        //Wenn Monat aus Liste dem Monat des Akkordions des Schwerpunkts entspricht
                        var auswertList = oListItem.get_item('Auswertung');    
                        var ausgabe = group.getElementsByClassName("text1")(j);
                        ausgabe.innerHTML = auswertList;                        //Schreibe in Textbereich des Akkordions-Monat
                    }
                }
            }
        }    
    }                                
}
    

function onQueryFailed(sender, args) {

   alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Vielen Dank das du dich damit befasst!!!

Viele Grüße

Andreas
Zitieren
#4
Hallo,

hab die Lösung nun selber gefunden. Anbei das fertige Script:

Code:
function onQuerySucceeded(sender, args) {

    var akkordion = document.getElementsByClassName("accordion");
                var listItemInfo = '';
                var listItemEnumerator = collListItem.getEnumerator();
            while (listItemEnumerator.moveNext()) {    
    
        for (i = 0; i < akkordion.length; i++){
    
                var oListItem = listItemEnumerator.get_current();
                var schwerpunktList = oListItem.get_item('Schwerpunkt');
                var akkordionElement = akkordion.item(i);

            if (schwerpunktList == akkordionElement.innerHTML){    

                var monat = akkordionElement.nextElementSibling.firstElementChild.querySelectorAll(".text");

            for (j = 0; j < monat.length; j++){        
                var monatElement = monat[j];
                var monatList = oListItem.get_item('Monat');
                
                if(monatList == monatElement.innerHTML){                        
                    var auswertList = oListItem.get_item('Auswertung');    
                    var ausgabe = akkordionElement.nextElementSibling.firstElementChild.querySelectorAll(".text1");
                    var ausgabeElement = ausgabe[j];
                        ausgabeElement.innerHTML = auswertList;            
                    }
                }
            }
        }
    
    }    
}
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste