頁面修改案例

最後更新： 2024年7月20日
  • 主題：

本主題中的案例顯示對頁面所做的變更如何影響Adobe Target顯示體驗的功能。

Target 選取器會決定在何處顯示體驗。如果在 Target 外修改頁面，變更可能會造成 Target 無法顯示體驗。

使用選取器時，唯一類別不等同於 ID。選取器一律只使用唯一類別。如果未將類別指派給元素，選取器會計算先前具有相同標記名稱的同層級項目數。

NOTE
雖然這些案例使用清單項目當作範例，但概念適用於任何元素。

情節: 在選取的元素前面，插入具有不同類別名稱的元素

在此範例中，會插入一個新元素作為 Target 選取器中元素的同層級項目。

JavaScript 有可能會新增元素上出現的第一個類別。在此情況下，傳送會失敗，也不會套用動作。

插入的元素:

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

已選取:

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

選取器: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

結果:

因為 li.women-section:eq(0) 不受影響，選取器會正常運作。

在可以記錄:

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

之後:

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

情節: 插入與所選元素的類別名稱相同的元素

在此情節中，會嘗試在已選取清單中的項目時插入清單。

插入的元素:

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

已選取

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

選取器: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

結果:

因為 ul.nav:eq(0) 提供了動態新增的元素，選取器無法運作。無法使用元素，也不會套用動作。在建立活動之後，動態或手動新增具有相同類別的類似清單項目時，第一個位置上會建立新元素。這會使選取器失去作用。

在可以記錄:

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

之後 (理想結果):

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

情節: 在選取的元素後面插入元素

在此情節中，會在選取的元素後面插入清單項目。

插入的元素:

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

已選取:

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

選取器: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

結果:

在此情況下，在尾端是所選清單項目的清單後面再插入清單沒有問題。新元素會新增至與所選元素相同的位置 (相對於父元素)。

在可以記錄:

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

之後:

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

情節: 移除另一個元素前面緊鄰的元素

在此情節中，會刪除所選元素前面的清單項目。

移除的元素:

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

已選取:

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

選取器: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

結果:

元素已成功移除，因為所選取項目的類別未遭更改。

在可以記錄:

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

之後:

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

情節: 移除另一個元素後面緊鄰的元素

在此情節中，會刪除所選元素後面的清單項目。

移除的元素:

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

已選取:

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

選取器: #wrap > ul.nav:eq(0) > li.women-section:eq(0)

結果:

元素已成功移除，因為所選取項目的類別未遭更改。移除的元素包含其父系樹狀子目錄內唯一的類別。

在可以記錄:

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

之後:

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