萌新求助：小程序怎么使得每个id上的操作互相独立啊？

Question

想请教各位前辈一个问题：小程序左右滑动，每滑动一次更新一句句子，我要怎么才能实现每个句子的收藏功能是独立的呢？
我现在的收藏功能是一句话被收藏了，其他全部都被收藏了。
那下面的代码是从网上借鉴的，侵删，但是我只是为了做练习和练手
谢谢各位前辈指点！
这是wxml

<view class="container">
  <swiper class="sentence-swiper">
    <swiper-item class="word" wx:for="{{weeklyrecommend}}"wx:key="index">
      <text  class="{{isClick?'iconfont icon-collect-after collect-position':'iconfont icon-collect-before collect-position'}}" catch:tap="haveSave" data-id="{{item.id}}"></text>
      <view class="classic-word">
        <text>{{item.sentence}}</text>
      </view>
    </swiper-item>
  </swiper>
</view>     

然后是js

// pages/collect/collect.js
Page({
  data: {
    job: [],
    jobList: [],
    id: '',
    isClick: false,
    jobStorage: [],
    jobId: '',
    weeklyrecommend: [
      {
        id: 0,
        sentence: "“为什么讨人喜的女人总是嫁给蠢物？”“因为有脑子的男人是不会娶讨人喜的女人的。”"
      },
      {
        id: 1,
        sentence: "只有坚信自己能改变世界的人，她才能改变世界。"
      },
      {
        id: 2,
        sentence: "“为什么讨人喜的女人总是嫁给蠢物？”“因为有脑子的男人是不会娶讨人喜的女人的。”"
    ]
  },
  haveSave(e) {
    console.log(e)
    if (!this.data.isClick == true) {
      let jobData = this.data.jobStorage;
      jobData.push({
        jobid: jobData.length,
        id: this.data.job.id,
      })
      console.log(this.data.job.id)
      wx.setStorageSync('jobData', jobData);//设置缓存
      wx.showToast({
        title: '已收藏',
      });
    } else {
      wx.showToast({
        title: '已取消收藏',
      });
    }
    this.setData({
      isClick: !this.data.isClick
    })
  }

})

Answer 1

根据id标记点击的句子