zoukankan      html  css  js  c++  java
  • 点击切换样式、以及点击自身移除样式效果

     ***************无数的失败终究换来了成功!***************************

    先来说下 Jquery:实现起来超级简单。

    function popreplyjq() {//点击切换样式、以及点击自身移除样式功能
        $('.item-reply-btn').bind('click', function(e) {
            e.stopPropagation(); //阻止事件冒泡
            //一句话实现 点击自身切换样式效果
            $(e.currentTarget).toggleClass('item-reply-pop-trans');
    
            $this = $(this); //找到 该pop元素
            var poparry = $('.item-reply-pop-trans');
            //循环判断不是当前pop元素---移除其样式
            for (var i = 0; i < poparry.length; i++) {
              if (poparry[i] != $this[0]) {
                $(poparry[i]).removeClass('item-reply-pop-trans');
              }
            }
        });
    }

    详解:

    e.currentTarget:
    target与currentTarget的区别? 
    
    通俗易懂的说法: 
    比如说现在有A和B, 
    A.addChild(B) 
    A监听鼠标点击事件 
    那么当点击B时,target是B,currentTarget是A 
    也就是说,currentTarget始终是监听事件者,而target是事件的真正发出者 
    toggleClass:对设置或移除被选元素的一个或多个类进行切换。   查看详情解释
    if (poparry[i] != $this[0]) {}:循环判断不是当前pop元素---就移除其样式  【这个很重要,涉及一点逻辑】
  • 相关阅读:
    vue 传参动态
    a href="tel" 拨打电话
    vue中rem的转换
    请求接口的封装
    http request 请求拦截器,有token值则配置上token值
    node溢出
    vue菜单切换
    vue的table切换
    vue页面初始化
    [论文笔记] Legacy Application Migration to the Cloud: Practicability and Methodology (SERVICES, 2012)
  • 原文地址:https://www.cnblogs.com/longm/p/7170093.html
Copyright © 2011-2022 走看看