微信小程序点击控制元素的显示与隐藏

首先我们先来看一下单个点击效果

我们来看一下wxml中的代码：

view class="conten"  view class="header"    view class="nav_i"      text class="nav_tex"更多内容/text    /view    view class="nav_righ" bindtap="mmmm"更多/view  /view  view class="body"    view class="data" bindtap="share"      view class="icon"        image style="width:19px;height:19px;text-align:conten" wx:if="{{shows}}" src="/src/icon/minus.png"/image        image style="width:19px;height:19px;text-align:conten" wx:else src="/src/icon/plus.png"/image      /view      view class="body_txt"        text2017-07-27/text      /view    /view    view class="share" wx:if="{{shows}}"      input placeholder="这是一个可以自动聚焦的input" auto-focus/    /view  /view/view

下面的是js中的主要代码：

  data: {    shows: false  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {  },  share: function () {    var that = this;    var sh = that.data.shows;    that.setData({      shows: !sh    })  },

要知道我们控制的元素有两个，一个是图片一个是input框，我们在页面中使用bindtap="share"进行绑定事件，同时在图片image和input标签使用shows变量来控制显示与隐藏

当我加上循环出现多个元素的时候，意料之中，会变成这个亚子(›´ω`‹ )

这里我们要判断一下，点击到标签的状态要不同于其它的，改动后的代码如下：

view class="conten"  view class="header"    view class="nav_i"      text class="nav_tex"更多内容/text    /view    view class="nav_righ" bindtap="mmmm"更多/view  /view  block wx:for-items="{{itemm}}"    view class="body"      view class="data" bindtap="share" id="{{item.id}}"        view class="icon"          image style="width:19px;height:19px;text-align:conten" wx:if="{{shows==item.id}}" src="/src/icon/minus.png"/image          image style="width:19px;height:19px;text-align:conten" wx:else src="/src/icon/plus.png"/image        /view        view class="body_txt"          text2017-07-27/text        /view      /view      view class='share {{shows==item.id?"show":"hidden"}}'        input placeholder="这是一个可以自动聚焦的input" auto-focus/      /view    /view  /block/view

data: {    shows: false,    itemm: [{      id: 1,      name: "1111"    }, {      id: 2,      name: "222"    }, {      id: 3,      name: "333"    }]  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {  },  share: function (event) {    var that = this;    var sh = that.data.shows;    var itemId = event.currentTarget.id;    console.log(itemId)    if (sh == itemId) {      that.setData({        shows: false      })    } else {      that.setData({        shows: itemId      })    }  },

首先我们在js中的data里面放一些数据，在block中用 wx:for-items循环一下（然并卵我的input并没有数据，这个先放一下），给每个循环出来的元素加个id，接下来的input用三元运算符来判断，不要忘记在css加上hidden：{displan:none},我们在js方法中用id和shows变量进行判断。（这个思路是从网上看到的，记录一下，有什么描述不当，欢迎指出）