jquery多事件问题

Question

使用jQuery测试一个非常简单的HTML，但无法使其工作。

我有一个button id="button_calls"，当单击它时，我想用id="tab_content_all_activity"隐藏一个div，用id="tab_content_calls"显示一个div。

我已经声明了一个css类is-active和is-inactive，它们分别触发display: block和display:none。

$("#button_calls").click(
function() {
$("#tab_content_calls").removeClass("is-inactive").addClass("is-active");
},
function() {
$("#tab_content_all_activity").removeClass("is-active").addClass("is-inactive");
});

然而，当我点击按钮时，什么也没发生。当我去掉第二个函数而只保留第一个函数时，id="tab_content_calls"确实变为活动的。换句话说，我不能同时做这两件事：显示一个div，隐藏另一个div。解决方案？请帮忙。

Answer 1

我建议您重新思考一下您的解决方案，这样您就有了一个用条件切换的函数，检查元素上的属性。

Psuedocode例如：

Element.OnClick => function {
if(Element.isActive)
change style classes
and set isActive = false
else
change style classes
and set isActive = true
}

不过，您不需要管理属性，您可以比较已经定义的类，然后切换它们，但我建议从测量中提取结果，以获得更稳健的解决方案。

Answer 2

您可以在第一个函数中处理这两个语句，而不需要第二个函数。检查以下可能的解决方案：

您的代码：

$("#button_calls").click(
function() {
$("#tab_content_calls").removeClass("is-inactive").addClass("is-active");
},
function() {
$("#tab_content_all_activity").removeClass("is-active").addClass("is-inactive");
}
);

您问题的可能解决方案：

$("#button_calls").click(
function() {
$("#tab_content_calls").removeClass("is-inactive").addClass("is-active");
$("#tab_content_all_activity").removeClass("is-active").addClass("is-inactive");
}
);