问题描述：

老师你好，当在阅读详情页面中点击一下收藏按钮时，颜色会变化，但是再次点击时，颜色不会变化，需要再次点击，颜色才会变化，我打开了storage，发现存储了一个布尔值的属性，该属性的值跟第一次点击时保存的值是一样的。说明是在点击事件中没有处理好，希望老师能看一下原因在哪里。

相关截图：

相关代码：

<!-- 原则：先静后动，先样式再数据 -->



<view class="container">


   <image src="{{imgSrc}}" class="article-img"></image>


   <view class="author-content">

      <image class="author-img" src="{{avatar}}"></image>


      <text class="author-name">{{author}}</text>


      <text class="author-fabiaoyu">发表于</text>


      <text class="author-time">{{dateTime}}</text>


   </view>


   <text class="article-title">
      {{title}}

   </text>



   <view class="tool">

      <view class="circle-img">

         <image src="/images/icon/collection.png" wx:if="{{collected}}" bind:tap="onCollectionTap">

         </image>


         <image src="/images/icon/collection-anti.png" wx:if="{{!collected}}" bind:tap="onCollectionTap">

         </image>


         <image src="/images/icon/share.png">

         </image>

      </view>



   </view>



   <text class="article-content">

      {{detail}}

   </text>

</view>

相关代码：

​
var postData = require('../../../data/posts-data');



// pages/posts/post-details/post-detail.js
Page({

   /**
    * 页面的初始数据

      小程序总是会data对象中的属性来做数据绑定，这个动作我们称之为读取数据并绑定

      但是这个读取数据并绑定这个动作的执行，是在onLoad函数执行之后发生的


    */
   data: {

   },



   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {

      // 获取被点击的文章选项的索引值，保存在变量postId中
      var postId = options.id;

      this.data.currentPostId = postId;


      // 发送初始化数据，使用扩展运算符三个点 ...  这样可以直接使用数据中的属性名而不需要再加上对象的名称
      this.setData({ ...postData.postList[postId] });



      // 从缓存中获取缓存的数据值 collectedObj
      var postsCollected = wx.getStorageSync('collectedObj');


      // 如果获取到的缓存数据值是有值的话，直接将其发送到初始化数据 data对象中去
      if(postsCollected) {


         var oneOfCollected = postsCollected[postId];


         // 再做一层判断，如果取到的缓存对象中的属性值是有值的，再发送数据到data对象中
         if(oneOfCollected) {


            this.setData({

               collected: oneOfCollected

            });

         };



      // 否则，如果没有值的话，就创建一个空的对象，并且将该对象的属性设为false
      }else {

         var postsCollected = {};

         postsCollected[postId] = false;

         wx.setStorageSync('collectedObj', postsCollected);

      };



   },


   // 收藏按钮的点击事件
   onCollectionTap: function () {


      // 获取缓存对象collectedObj
      var postsCollected = wx.getStorageSync('collectedObj');


      // 接着获取该对象中的属性值
      var oneOfCollected = postsCollected[this.data.currentPostId];


      // 将缓存对象中的值设置为取反之后的布尔值
      oneOfCollected = !oneOfCollected;


      // 更新缓存对象中的属性值
      postsCollected[this.data.currentPostId] = oneOfCollected;


      // 设置已经更新过的缓存对象为新的一个缓存对象
      wx.setStorageSync('collectedObj', postsCollected);


      // 将data对象中的属性currentPostId也更新一下
      this.data.currentPostId = oneOfCollected;


      // 最后发送数据到data对象中去，以重新渲染页面
      this.setData({

         collected: oneOfCollected

      });


   },



})