• 点击切换样式、以及点击自身移除样式效果


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

    先来说下 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元素---就移除其样式  【这个很重要,涉及一点逻辑】
  • 相关阅读:
    初步了解Ajax
    什么是applet
    FilterLog代码分析
    Async分析
    HttpServletRequest hrequest
    xml的定义用途
    企业级与应用级的区别
    未来规划
    黄金点游戏
    hashCode与eqauls
  • 原文地址:https://www.cnblogs.com/longm/p/7170093.html
Copyright © 2020-2023  润新知