查看: 2170|回复: 0

[JavaScript/JQuery] 微信小程序 实现点击添加移除class

发表于 2017-12-31 08:00:06

微信小程序点击添加移除class类实现动态变化class


wxml:

  1. <view class="location_bottom" hidden="" >
  2. <view class="{{_num == 1?'add_citying':'add_city'}}" data-num = "1" bindtap="clickNum">北京</view>
  3. <view class="{{_num == 2?'add_citying':'add_city'}}" data-num = "2" bindtap="clickNum">上海</view>
  4. </view>
复制代码

wxss:

  1. .location_bottom{height: 140rpx;line-height: 140rpx;color: #d91f16;font-size:
  2. 28rpx;border-top: 2rpx #ebebeb solid; border-bottom: 2rpx #ebebeb solid; padding: 0 20rpx; align-items: center;display: -webkit-flex;}
复制代码
  1. .add_city{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx
  2. solid #ebebeb; color: #000000;margin-right: 20rpx; }
  3. .add_citying{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center;
  4. border: 2rpx solid #09bb07; color: #09bb07;margin-right: 20rpx;}
复制代码

js:

  1. Page({
  2. data: {
  3. _num: 0,
  4. },
  5. clickNum: function (e) {
  6. console.log(e.target.dataset.num)
  7. this.setData({
  8. _num: e.target.dataset.num
  9. })
  10. },
  11. onLoad: function (options) {
  12. }
  13. })
复制代码

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!



回复

使用道具 举报