Question

我怎样才能让这样的代码更清晰、更易于阅读。它完成了工作，但我觉得这是一个非常丑陋的解决方案：

jQuery(".mobile-icon").click(function() {
  jQuery(this).addClass("active");
  jQuery(".desktop-icon").removeClass("active");
  jQuery(".tablet-icon").removeClass("active");
  jQuery(".iframe-wrapper").addClass("mobile");
  jQuery(".iframe-wrapper").removeClass("desktop");
  jQuery(".iframe-wrapper").removeClass("tablet");
  jQuery(".frame").addClass("iframe-mobile");
  jQuery(".frame").removeClass("iframe-desktop");
  jQuery(".frame").removeClass("iframe-tablet");
});

提前致谢！

Answer 1

您可以将 .removeClass() 和 addClass() 组合在一起，即：

jQuery(".mobile-icon").click(function() {
  jQuery(this).addClass("active");
  jQuery(".desktop-icon , .tablet-icon ").removeClass("active");
  jQuery(".iframe-wrapper").addClass("mobile").removeClass("desktop tablet");
  jQuery(".frame").addClass("iframe-mobile").removeClass("iframe-desktop iframe-tablet");
});

我如何使这个典型的 jQuery 代码更简洁、更易于维护？

1 个答案: