Question

我在创建一个在同一页面上有两个动态轮播的Google Amp Page时遇到问题

每个轮播具有以下功能：当用户选择颜色按钮时，图像会更改以匹配颜色，立即购买按钮会更改以更新所选颜色的链接。

除了一个问题，所有似乎都运作良好。在重新加载时，当我在两个旋转木马中的任何一个上选择颜色时，另一个旋转木马上的立即购买按钮消失。为受影响的旋转木马选择任何颜色都可以恢复缺失的按钮，一切都很顺利，无论进一步的互动如何，两个按钮都保持可见

有关为何发生这种情况的任何想法？

enter code here
<!-- Product 1 -->
<amp-carousel id="CC50" width="414" height="550" layout="responsive" type="slides" [slide]="product.selectedSlideFor50" class="show  fadeIn">
  <a href="https://www.example.com">
    <amp-img src="image-50w.jpg" alt="Complete Care 5.0 White" width="414" height="550" layout="responsive" class="selected" tabindex="0">
    </amp-img>
  </a>
  <a href="https://www.example.com">
    <amp-img src="image-50b.jpg" alt="Complete Care 5.0 Black" width="414" height="550" layout="responsive" tabindex="0">
    </amp-img>
  </a>
</amp-carousel>
<p class="chooseColor">Choose Color</p>
<ul class="colorSelector">
  <li [class]="product.selectedSlideFor50 == 0 ? 'active' : ''" class="active">
    <div on="tap:AMP.setState({product: {selectedSlideFor50 : 0 }})" class="square white" role="button">
    </div>
  </li>
  <li [class]="product.selectedSlideFor50 == 1 ? 'active' : ''">
    <div on="tap:AMP.setState({product: {selectedSlideFor50 : 1 }})" class="square black" role="button">
    </div>
  </li>
</ul>
<a href="https://www.example.com" [class]="product.selectedSlideFor50 == 1 ? 'show' : 'hide'" class="hide">
  <div class="btn">BUY BLACK NOW </div>
</a>
<a href="https://www.example.com" [class]="product.selectedSlideFor50 == 0 ? 'show' : 'hide'" class="show">
  <div class="btn">BUY White NOW</div>
</a>

<!-- Product 2 -->
<amp-carousel id="CC55" width="420" height="570" layout="responsive" type="slides" [slide]="product.selectedSlideFor55" class="show  fadeIn">
  <a href="https://www.example.com">
    <amp-img src="image-55b.jpg" alt="Complete Care 5.5 Black" width="414" height="550" layout="responsive" class="selected" tabindex="0">
    </amp-img>
  </a>
  <a href="https://www.example.com">
    <amp-img src="image-55w.jpg" alt="Complete Care 5.0 White" width="414" height="550" layout="responsive" tabindex="0">
    </amp-img>
  </a>
</amp-carousel>
<p class="chooseColor">Choose Color</p>
<ul class="colorSelector">
  <li [class]="product.selectedSlideFor55 == 1 ? 'active' : ''">
    <div on="tap:AMP.setState({product: {selectedSlideFor55 : 1 }})" class="square white" role="button">
    </div>
  </li>
  <li [class]="product.selectedSlideFor55 == 0 ? 'active' : ''" class="active">
    <div on="tap:AMP.setState({product: {selectedSlideFor55 : 0 }})" class="square black" role="button">
    </div>
  </li>
</ul>
<a href="https://www.example.com" [class]="product.selectedSlideFor55 == 0 ? 'show' : 'hide55'" class="show">
  <div class="btn">BUY BLACK NOW </div>
</a>
<a href="https://www.example.com" [class]="product.selectedSlideFor55 == 1 ? 'show' : 'hide55'" class="hide55">
  <div class="btn">BUY White NOW</div>
</a>

AMP-HTML产品颜色轮播碰撞

0 个答案: