javascript - 如何使用 jquery 使 2 个按钮切换 css 并仅使用 1 个按钮。不显示隐藏/显示

Question

伙计们，我被这个问题困住了，即使使用标准的 js，我也无法实现我想要的。

我放置了一个 JSfiddle，您可以在其中以非常简单的方式看到我正在尝试做的事情，当然它不是完整的代码，但我试图让它真正容易理解我想要的东西。

我有 2 个按钮和 2 个不同的 css 属性。我不想使用切换，因为这样概念就会丢失。因为它只是我的一个巨大元素的一部分。.toggle() 在这里不适合，甚至不起作用，因为它显示然后隐藏它，但在我的情况下必须有没有隐藏或再次显示。无论如何，最好看它而不是在这里写一本书:)))

My fiddle code

  $(document).ready(function() {
      $(".bob").click(function() {
        $(".box").css("background", "#ffffff");
        $(".box").css("transform", "rotateX(30deg)");
        $(".box").css("width", "300px");
      });
      $(".jek").click(function() {
        $(".box").removeAttr("style");
        $(".box").css("transform", "rotateY(120deg)");
      });
    })

此外，我只想制作 1 个按钮来完成 2 个按钮的工作。 谢谢。

Answer 1

向您的按钮添加一个通用类，例如 .button，然后执行此操作

$(document).ready(function () {
    $(".button").click(function () {
        var $target = $(this);
        if ($target.is('.bob')) {
            $target.removeClass('bob').addClass('jek');
            // do whatever you need for bob
        } else {
           $target.removeClass('jek').addClass('bob');
            // do whatever you need for jek
        }
    });
});