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

Question

how can I make Code like this cleaner and easier to read. It gets the job done but I feel it's a really ugly solution:

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");
});

Thanks in advance!

Answer 1

You can combine .removeClass() and addClass() together ie :

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");
});