Question

我有以下javascript对象：

TeamExpand = {
    trigger: '.team-info h2.initial',
    container: '.team-info',
    closeTrigger: '.team-info h2.expanded',
    init: function() {
       jQuery(this.trigger).click(this.expandInfo.bind(this));
       jQuery(this.closeTrigger).click(this.closeInfo.bind(this));
    },
    expandInfo: function(e) {
        jQuery(e.currentTarget).closest('.team-info').css("height", "100%");
        jQuery(e.currentTarget).removeClass("initial");
        jQuery(e.currentTarget).addClass("expanded");
        jQuery(this.socialSVG).attr("fill", "#ffc40c");
    },
    closeInfo: function(e) {
        jQuery(e.currentTarget).closest('.team-info').css("height", "64px");
        jQuery(e.currentTarget).removeClass("expanded");
        jQuery(e.currentTarget).addClass("initial");
        jQuery(this.socialSVG).attr("fill", "white");
    }
}

我的HTML如下：

<div class="team-info">
    <h2 class="initial">Header</h2>
    <h3>Job Title</h3>
    <p>Bio</p>
</div><!--end team-info-->

＆＃39; expandInfo＆＃39;功能运行得很好并且更换了容器＆＃39;高度为100％;最初的＆＃39;该课程已从h2中移除，并且已展开＆＃39; class被添加到h2。但是关闭触发器上的点击事件＆＃39;变量（h2.expanded）元素未注册。我做错了什么？

Answer 1

我会重写一下以使事件处理程序更简单。对所有h2使用一个处理程序，然后检查该类。这样就可以避免连接分离处理程序。

TeamExpand = {
    trigger: '.team-info h2',
    container: '.team-info',
    init: function() {
       jQuery(this.trigger).click(this.doTriger.bind(this));
    },
    doTriger: function(e) {
        var element = jQuery(e.currentTarget);
        if (element.hasClass('initial')) {
            this.expandInfo(element);
        } else {
            this.closeInfo(element);
        }
    },
    expandInfo: function(element) {
        element.closest('.team-info').css("height", "100%");
        element.removeClass("initial");
        element.addClass("expanded");
        jQuery(this.socialSVG).attr("fill", "#ffc40c");
    },
    closeInfo: function(element) {
        element.closest('.team-info').css("height", "64px");
        element.removeClass("expanded");
        element.addClass("initial");
        jQuery(this.socialSVG).attr("fill", "white");
    }
}

Answer 2

我认为这是因为您将点击事件功能应用于一个实际不存在的元素（ h2 元素还没有 .expanded 类。）

尝试移动这行代码..

jQuery(this.closeTrigger).click(this.closeInfo.bind(this));

..到 expandInfo 函数的末尾，并添加此..

jQuery(this.closeTrigger).unbind('click');

..到此行之前的 closeInfo 函数..

jQuery(e.currentTarget).removeClass("expanded");

希望这有帮助！

完整代码..

TeamExpand = {
    trigger: '.team-info h2.initial',
    container: '.team-info',
    closeTrigger: '.team-info h2.expanded',
    init: function() {
       jQuery(this.trigger).click(this.expandInfo.bind(this));
    },
    expandInfo: function(e) {
        jQuery(e.currentTarget).closest('.team-info').css("height", "100%");
        jQuery(e.currentTarget).removeClass("initial");
        jQuery(this.trigger).unbind('click');
        jQuery(e.currentTarget).addClass("expanded");
        jQuery(this.socialSVG).attr("fill", "#ffc40c");
        jQuery(this.closeTrigger).click(this.closeInfo.bind(this));
    },
    closeInfo: function(e) {
        jQuery(e.currentTarget).closest('.team-info').css("height", "64px");
        jQuery(this.closeTrigger).unbind('click');
        jQuery(e.currentTarget).removeClass("expanded");
        jQuery(e.currentTarget).addClass("initial");
        jQuery(this.socialSVG).attr("fill", "white");
        this.init();
    }
}

使用动态添加的类在元素上单击无法识别

2 个答案: