Scenarier för sidändring

Scenerna i det här avsnittet visar hur ändringar som gjorts på sidan påverkar Adobe Target förmåga att visa en upplevelse.

Målväljaren avgör var en upplevelse ska visas. Om en sida ändras utanför Target kan ändringarna påverka möjligheten att visa upplevelsen i Target.

När du använder väljaren motsvarar den unika klassen inte ID:t. Väljaren fungerar alltid med en unik klass. Om elementet inte har tilldelats någon klass beräknar väljaren antalet tidigare likställda objekt som har samma taggnamn.

Scenario: Infoga ett element med ett annat klassnamn före det markerade elementet

I det här exemplet infogas ett nytt element på samma nivå som elementet i målväljaren.

Det är möjligt att den första klassen i elementet kan läggas till av JavaScript. I så fall misslyckas leveransen och åtgärden tillämpas inte.

Infogat element:

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

Markerat:

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

Väljare: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultat:

Väljaren fungerar som förväntat eftersom li.women-section:eq(0) påverkas inte.

Före:

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

Efter:

<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>

Scenario: Infoga ett element med samma klassnamn som det markerade elementet

I det här scenariot görs ett försök att infoga en lista när ett objekt i en lista är markerat.

Infogat element:

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

Markerad

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

Väljare: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultat:

Väljaren fungerar inte eftersom ul.nav:eq(0) innehåller ett dynamiskt tillagt element. Elementet blir inte tillgängligt och åtgärden används inte. När ett liknande listobjekt med samma klass läggs till dynamiskt eller manuellt efter att en aktivitet har skapats, skapas ett nytt element på den första positionen. Detta bryter väljaren.

Före:

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

Efter (försök):

<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>

Scenario: Infoga ett element efter det markerade elementet

I det här scenariot infogas ett listobjekt efter det markerade elementet.

Infogat element:

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

Markerat:

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

Väljare: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultat:

I det här fallet fungerar infogning av en lista efter listslutet med det markerade listobjektet som förväntat. Det nya elementet läggs till på samma plats som det markerade elementet i förhållande till det överordnade elementet.

Före:

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

Efter:

<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>

Scenario: Ta bort elementet direkt före ett annat element

I det här scenariot tas listobjektet före det valda elementet bort.

Borttaget element:

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

Markerat:

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

Väljare: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultat:

Elementet har tagits bort eftersom det markerade objektets klass inte har ändrats.

Före:

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

Efter:

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

Scenario: Ta bort elementet omedelbart efter ett annat element

I det här scenariot tas listobjektet efter det valda elementet bort.

Borttaget element:

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

Markerat:

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

Väljare: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultat:

Elementet har tagits bort eftersom det markerade objektets klass inte har ändrats. Det borttagna elementet innehåller en unik klass i det överordnade underträdet.

Före:

<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>

Efter:

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

Scenario: Ta bort det markerade elementet

I det här scenariot tas det markerade listobjektet bort.

Borttaget element:

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

Markerat:

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

Väljare: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultat:

Elementet har tagits bort.

Före:

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

Efter

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

Scenario: Byt namn på klassen för det markerade elementet

I det här scenariot ändras klassen för det markerade listobjektet.

Ändrat element:

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

Markerat:

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

Väljare: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

Resultat:

Det går inte att byta namn på elementklassen eftersom class hittades inte.

Före:

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

Efter (försök):

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