Szenarien für die Seitenmodifizierung

Die Szenarien in diesem Thema zeigen, wie sich an Ihrer Seite vorgenommene Änderungen auf die Fähigkeit von Adobe Target auswirken, ein Erlebnis anzuzeigen.

Der Target-Selektor legt fest, wo ein Erlebnis angezeigt wird. Wenn eine Seite außerhalb von Target modifiziert wird, können sich die Änderungen auf die Fähigkeit von Target auswirken, das Erlebnis anzuzeigen.

Bei der Verwendung des Selektors entspricht die eindeutige Klasse nicht der ID. Der Selektor funktioniert immer mit einer eindeutigen Klasse. Wenn dem Element keine Klasse zugewiesen ist, berechnet der Selektor die Anzahl der früheren Geschwisterelemente, die denselben Tag-Namen aufweisen.

Szenario: Vor dem ausgewählten Element wird ein Element mit einem anderen Klassennamen eingefügt

In diesem Beispiel wird ein neues Element als Geschwisterelement des Elements im Target-Selektor eingefügt.

Es besteht die Möglichkeit, dass am Element vorhandene erste Klasse durch JavaScript hinzugefügt wird. In diesem Fall scheitert die Bereitstellung und die Aktion wird nicht angewendet.

Eingefügtes Element:

<li class="kids-section">Kids</li>

Ausgewählt:

<li class="women-section">Women</li>

Selektor: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Ergebnis:

Der Selektor funktioniert wie erwartet, da li.women-section:eq(0) nicht betroffen ist.

Bevor:

<div id="wrap">
     <ul class="nav">
        <li class="men-section"> Men</li> <li class="women-section">Women</li>
     </ul>
</div>

Nachher:

<div id="wrap">
    <ul class="nav">
        <li class="kids-section">Kids</li>
        <li class="men-section"> Men</li>       <li class="women-section">Women</li>
    </ul>
</div>

Szenario: Es wird ein Element mit demselben Klassennamen wie das ausgewählte Element eingefügt

Bei diesem Szenario wird versucht, eine Liste einzufügen, wenn ein Listenelement ausgewählt ist.

Eingefügtes Element:

<ul class="nav">
   <li class="item"> Sale </li>
   <li> class="item"> Offers </li>
</ul>

Ausgewählt

<li class="women-section">Women</li>

Selektor: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Ergebnis:

Der Selektor funktioniert nicht, weil ul.nav:eq(0) ein dynamisch hinzugefügtes Element bereitstellt. Das Element ist nicht verfügbar und die Aktion wird nicht angewendet. Wenn ein ähnliches Listenelement mit derselben Klasse nach der Erstellung einer Aktivität dynamisch oder manuell hinzugefügt wird, wird ein neues Element an der ersten Position erstellt. Dadurch wird der Selektor gestoppt.

Bevor:

<div id="wrap">
    <ul class="nav">
        <li class="men-section"> Men</li>       <li class="women-section">Women</li>
    </ul>
</div>

Nach (versucht):

<div id="wrap">
     <ul class="nav">
        <li class="item"> Sale</li>
        <li> class="item"> Offers</li>
     </ul>
     <ul class="nav">
       <li class="men-section"> Men</li>
       <li class="women-section">Women</li>
    </ul>
</div>

Szenario: Es wird ein Element nach dem ausgewählten Element eingefügt

Bei diesem Szenario wird nach dem ausgewählten Element ein Listenelement eingefügt.

Eingefügtes Element:

<ul class="nav">
   <li class="men-section"> Men Clothes</li>
   <li class="women-section"> Women Clothes</li>
</ul>

Ausgewählt:

<li class="women-section">Women Shoes</li>

Selektor: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Ergebnis:

In diesem Fall funktioniert das Einfügen einer Liste nach einer Liste, die mit dem ausgewählten Listenelement endet, wie erwartet. Das neue Element wird relativ zum übergeordneten Element an derselben Position wie das ausgewählte Element hinzugefügt.

Bevor:

<div id="wrap">
    <ul class="nav">
        <li class="men">Men Shoes </li>       <li class="women">Women Shoes</li>
    </ul>
</div>

Nachher:

<div id="wrap">
    <ul class="nav">
        <li class="men">Men Shoes </li>
        <li class="women">Women Shoes</li>
    </ul>
      <ul class="nav">
        <li class="men-section">Men Clothes</li>
        <li class="women-section"> Women Clothes</li>
    </ul>
</div>

Szenario: Das Element unmittelbar vor einem weiteren Element wird entfernt

Bei diesem Szenario wird das Listenelement vor dem ausgewählten Element gelöscht.

Entferntes Element:

<li class="men-section"> Men </li>

Ausgewählt:

<li class="women-section">Women</li>

Selektor: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Ergebnis:

Das Element wird erfolgreich entfernt, weil die Klasse des ausgewählten Elements nicht verändert wird.

Bevor:

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-section">Women</li>
    </ul>
</div>

Nachher:

<div id="wrap">
    <ul class="nav">
        <li class="women-section">Women</li>
    </ul>
</div>

Szenario: Das Element unmittelbar nach einem anderen Element wird entfernt

Bei diesem Szenario wird das Listenelement nach dem ausgewählten Element gelöscht.

Entferntes Element:

<li class="kids-section">Kids</li>

Ausgewählt:

<li class="women-section">Women</li>

Selektor: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Ergebnis:

Das Element wird erfolgreich entfernt, weil die Klasse des ausgewählten Elements nicht verändert wird. Das entfernte Element enthält eine einzigartige Klasse innerhalb des übergeordneten Teilbaums.

Bevor:

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-section">Women</li>
        <li class="kids-section">Women</li>
    </ul>
</div>

Nachher:

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-section">Women</li>
    </ul>
</div>

Szenario: Das ausgewählte Element wird entfernt

Bei diesem Szenario wird das ausgewählte Listenelement entfernt.

Entferntes Element:

<li class="women-shoes">Women</li>

Ausgewählt:

<li class="women-shoes">Women</li>

Selektor: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Ergebnis:

Das Element wurde erfolgreich entfernt.

Bevor:

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-shoes">Women</li>
    </ul>
</div>

Nachher

<div id="wrap">
    <ul class="nav">
       <li class="men-section">Men</li>
    </ul>
</div>

Szenario: Die Klasse des ausgewählten Elements wird umbenannt

Bei diesem Szenario wird die Klasse des ausgewählten Listenelements umbenannt.

Geändertes Element:

<li class="women-section">Women</li>

Ausgewählt:

<li class="women-section">Women</li>

Selektor: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Ergebnis:

Die Elementklasse kann nicht umbenannt werden, weil class nicht gefunden wurde.

Bevor:

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-section">Women</li>
    </ul>
</div>

Nach (versucht):

<div id="wrap">
    <ul class="nav">
        <li class="men-section">Men</li>
        <li class="women-shoes">Women</li>
    </ul>
</div>