如何使用jquery使2个按钮切换css，而只使用1个按钮.不显示隐藏/显示

How to make 2 buttons toggle css with jquery and using only 1 button instead. NOT display hide/show

本文关键字：按钮 显示 1个 隐藏 css jquery 何使用 2个      更新时间：2023-09-26

伙计们，我一直被这个问题困扰着，即使使用标准的js，我也无法归档我想要的东西。

我放了一个JSfiddle，你可以用一种非常简单的方式看到我正在尝试做什么，当然这不是完整的代码，但我试图让它真正容易地理解我想要什么。

我有两个按钮和两个不同的css属性。我不想使用切换，因为在这种方式下，概念会丢失。因为这只是我的一个大项目中的一小部分。.toggle()在这里不合适，甚至不起作用，因为它显示然后使其隐藏，但在我的情况下，必须没有隐藏或再次显示。无论如何，与其在这里写书，不如看看它：））

我的小提琴编码

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

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

向按钮添加一个通用类，例如.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
        }
    });
});

与@i的概念相同——不向按钮添加按钮类，而是使用：button jquery选择器，只需在按钮上切换类即可单击并为每个类提供不同的css。请注意，如果实际上有多个按钮，您需要向所需的按钮添加一个类或id（并更改下面的js），否则这将触发任何按钮点击的切换。。。。，但如果只有一个按钮，这就可以完成任务。

$(document).ready(function () {
    $(":button").click(function () {
        $(this).toggleClass('bob jek');
    });
});

//css

.bob{//whatever css styling}
.jek{//whatever css styling}
相关文章：