Scenari di modifica delle pagine

Ultimo aggiornamento: 26 maggio 2023
  • Argomenti:

Gli scenari in questo argomento mostrano come le modifiche apportate alla pagina influiscono sulla capacità di Adobe Target di visualizzare un’esperienza.

Il selettore di Target determina la posizione di visualizzazione di un’esperienza. Se una pagina viene modificata al di fuori di Target, le modifiche potrebbero influenzare la capacità di Target di visualizzare l’esperienza.

Quando si utilizza il selettore, la classe univoca non è equivalente all’ID. Il selettore funziona sempre con una classe univoca. Se all’elemento non è assegnata alcuna classe, il selettore calcola il numero di elementi di pari livello precedenti con lo stesso nome di tag.

NOTE
Anche se questi scenari utilizzano voci di elenco come esempi, i concetti illustrati si applicano a qualsiasi elemento.

Scenario: inserire un elemento con un nome di classe diverso prima dell’elemento selezionato

In questo esempio, un nuovo elemento viene inserito come elemento di pari livello dell’elemento nel selettore di Target.

Esiste la possibilità che JavaScript aggiunga la prima classe presente nell’elemento. In tal caso, la consegna non riesce e l’azione non viene applicata.

Elemento inserito:

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

Selezionato:

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

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

Risultato:

Il selettore funziona come previsto perché li.women-section:eq(0) non è interessato.

Prima:

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

Dopo:

<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: inserire un elemento con lo stesso nome di classe dell’elemento selezionato

In questo scenario, si tenta di inserire un elenco quando è selezionata una voce in un elenco.

Elemento inserito:

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

Selezionato

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

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

Risultato:

Il selettore non funziona, perché ul.nav:eq(0) fornisce un elemento aggiunto in modo dinamico. L’elemento non sarà disponibile e l’azione non viene applicata. Se dopo aver creato un’attività aggiungi in modo dinamico o manuale un elemento elenco simile con la stessa classe, viene creato un nuovo elemento nella prima posizione. Questo impedisce il corretto funzionamento del selettore.

Prima:

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

Dopo (tentativo):

<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: inserire un elemento dopo l’elemento selezionato

In questo scenario, una voce di elenco viene inserita dopo l’elemento selezionato.

Elemento inserito:

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

Selezionato:

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

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

Risultato:

In questo caso, l’inserimento di un elenco dopo quello che termina con la voce di elenco selezionata funziona come previsto. Il nuovo elemento viene aggiunto alla stessa posizione dell’elemento selezionato in relazione all’elemento padre.

Prima:

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

Dopo:

<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: rimuovere l’elemento immediatamente precedente un altro

In questo scenario, viene eliminata la voce di elenco che precede quella selezionata.

Elemento rimosso:

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

Selezionato:

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

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

Risultato:

L’elemento viene rimosso correttamente perché la classe dell’elemento selezionato non viene modificata.

Prima:

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

Dopo:

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

Scenario: rimuovere l’elemento immediatamente successivo a un altro

In questo scenario, viene eliminata la voce di elenco dopo l’elemento selezionato.

Elemento rimosso:

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

Selezionato:

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

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

Risultato:

L’elemento viene rimosso correttamente perché la classe dell’elemento selezionato non viene modificata. L’elemento rimosso include una classe univoca all’interno della relativa sottostruttura padre.

Prima:

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

Dopo:

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