AMP-HTML产品颜色旋转木马冲突

我在创建一个在同一页面上有两个动态旋转木马的Google Amp页面时遇到了一个问题

每个转盘都具有以下功能： 当用户选择“颜色”按钮时，图像将更改为与颜色匹配，而“立即购买”按钮将更改为更新所选颜色的链接

除了一个问题外，一切似乎都进展顺利。在重新加载时，当我在两个转盘中的任何一个上选择颜色时，另一个转盘上的“立即购买”按钮将消失。为受影响的旋转木马选择任何颜色都会恢复丢失的按钮，一切正常，无论进一步交互，两个按钮都保持可见

关于为什么会发生这种情况有什么想法吗

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>

在此处输入代码
选择颜色






选择颜色