Show Menu
主題×

頁面修改案例

此主題中的案例顯示對您的頁面進行的變更如何影響 Target 顯示體驗的功能。
Target 選取器會決定在何處顯示體驗。如果在 Target 外修改頁面,變更可能會造成 Target 無法顯示體驗。
使用選取器時,唯一類別不等同於 ID。選取器一律只使用唯一類別。如果未將類別指派給元素,選取器會計算先前具有相同標記名稱的同層級項目數。
雖然這些案例使用清單項目當作範例,但概念適用於任何元素。

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

在此範例中,會插入一個新元素作為 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>

情節: 移除所選的元素

在此情節中,會刪除所選的清單項目。
移除的元素:
<li class="women-shoes">Women</li>

已選取:
<li class="women-shoes">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-shoes">Women</li>
    </ul>
</div>

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

情節: 重新命名所選元素的類別

在此情節中,會變更所選清單項目的類別。
變更的元素:
<li class="women-section">Women</li>

已選取:
<li class="women-section">Women</li>
選取器: #wrap > ul.nav:eq(0) > li.women-section:eq(0)
結果:
無法重新命名元素類別,因為找不到 class
在可以記錄:
<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="men-section">Men</li>
        <li class="women-shoes">Women</li>
    </ul>
</div>