使用Polymer在两个div之间切换

时间:2015-05-13 21:58:49

标签: javascript html5 polymer web-component

我遇到了一个使用聚合物的问题我想切换两个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;

感谢您阅读

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

我找到了问题的修复程序,我在使用它们之前为绑定隐藏值分配了true和false值(这为隐藏状态指定了true,为单独的值指定了false),然后在单击toggle绑定时我只是使用@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>

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