Question

我有按钮（如心形），我尝试在激活（听到红色）和删除活动类之间切换，当我单击按钮时，它显示红色，但在那之后它消失了

  <button id="post_like_button_acc" class="like_button" @click="addLike(comment.id, $el,index,)" ref="Post_LikeButtonAcc">
                       <div class='large-font text-center top-20'>
                          <ion-icon name="heart" class="like_comment" :class="{ active: activeItem  == comment.id  }">
                            <div class='red-bg' ></div> 
                          </ion-icon>
                        </div>
                    <p class="" style="red; margin-left: 10px; color: white" ></p>
                    </button>



   async addLike(id, el){
       this.activeItem = id;
    }

心形图标的css

    ion-icon.active{
  animation:like 0.5s 1;
  fill:red;
  stroke:none;
}

Answer 1

我建议在 CSS 中使用 :hover 和 :active。

https://developer.mozilla.org/ko/docs/Web/CSS/:active https://developer.mozilla.org/ko/docs/Web/CSS/:hover

Answer 2

通过在函数中添加el来获取数组中元素的div的解决方法 addLike(id, el) 这个你可以在使用后得到 hte div let icon = el.querySelector('ion-icon');

 async addLike(id, el){
    var button_clicked = $(el)
        this.activeItem = id;
            if(this.activeItem = id){
                     let icon = el.querySelector('ion-icon');
                    icon.classList.toggle('active');
            }
    }

在 Vue 的切换类中单击后按钮消失

2 个答案: