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

朴灿烈づ我的快乐病毒、 2023-08-17 15:32 106阅读 0赞

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

**首先我们先来看一下单个点击效果**  
![1334878-20190918151621534-728137087.png][]  
![1334878-20190918151650055-952002530.png][]

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

### 下面的是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变量来控制显示与隐藏 ###

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

![1334878-20190918162146319-316424263.png][]

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

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变量进行判断。**（这个思路是从网上看到的，记录一下，有什么描述不当，欢迎指出）** ###

![1334878-20190918175000964-2033131380.png][]

转载于:https://www.cnblogs.com/zljy/p/11542444.html

[1334878-20190918151621534-728137087.png]: /images/20230810/2e15a4bf84a34397a8e936e811923343.png
[1334878-20190918151650055-952002530.png]: /images/20230810/4550489e4eaf4c2a938f06f1e1f5f242.png
[1334878-20190918162146319-316424263.png]: /images/20230810/746b4d90368a420cac199e03eeb406a8.png
[1334878-20190918175000964-2033131380.png]: /images/20230810/91b51dd3bee04fc099395eb6b927b1f7.png