使用 Polymer 在两个 div 之间切换答案

【问题标题】：Toggling between two divs using Polymer使用 Polymer 在两个 div 之间切换
【发布时间】：2015-05-14 07:30:57
【问题描述】：

我遇到了一个问题，我想在两个 div 之间切换使用聚合物，我遇到的问题是，我想使用聚合物标准来切换他们使用的位置：hidden?="{{toggleMe}}" 作为 div 上的属性，并且只是绑定它，然后创建一个函数来进行切换或显示/隐藏，如下所示：

<div hidden?="{{divOne}}">TEST</div>
<div hidden?="{{divTwo}}">TEST2</div>

<a on-tap="{{change}}">Toggle</a>

<script>
Polymer('componentName',{
  change: function(){
   this.divOne = !this.divOne;
   this.divTwo = !this.divTwo;
  }
})
</script>

上面的内容将同时显示和隐藏，我希望一个显示另一个隐藏，所以基本上在两者之间切换，同时从一个隐藏和另一个活动开始，然后从那里交换状态。

我也试过这个，但没有运气，因为我不能这样做或使用“！”在左侧：

!this.divOne = this.divOne;
this.divTwo = !this.divTwo;

感谢阅读

【问题讨论】：

标签： javascript html polymer web-component

【解决方案1】：

this.divOne = !(this.divTwo = this.divOne);

【讨论】：

这可行，但是当应用程序加载时，它第一次显示两个可见，直到我按下切换按钮，然后它显示一个并相应地切换 - 有没有办法让一个 div 首先可见然后在单击按钮时在两种状态之间切换？

【解决方案2】：

我找到了问题的解决方法，我在使用它们之前为绑定隐藏值分配了真值和假值（这为隐藏状态分配了真值，为单独的值分配了假值），然后单击切换绑定我只是使用@Zikes 的代码来进行切换工作（谢谢）。

当前工作代码

<div hidden?="{{divOne}}">TEST</div>
<div hidden?="{{divTwo}}">TEST2</div>

<a on-tap="{{change}}">Toggle</a>

<script>
Polymer('componentName',{
  divOne: false,
  divTwo:true,
  change: function(){
   this.divOne = !(this.divTwo = this.divOne);
  }
})
</script>

希望这可以帮助将来清除某人

【讨论】：