jqueryで2つのボタンを切り替えるには、代わりに1つのボタンだけを使用します。表示されないhide/show

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

また、私は2つのボタンの仕事をするだけで1ボタンを作りたいです。おかげさまで

Answer 1

例えば.buttonのように、あなたのボタンに一般的なクラスを追加し、ボタンに、ボタンクラスを追加しますが、使用しなくても@ i--としてこの

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

Answer 2

同じ概念の操作を行います。ボタンのjqueryのセレクタをボタンをクリックするだけでクラスを切り替えることができ、クラスごとに異なるCSSを持つことができます。実際に複数のボタンがある場合は、目的のクラスまたはIDを追加する必要があります（下のjを変更します）。そうしないと、ボタンをクリックしたときにトグルがトリガーされます....しかし、 1つのボタンはこれを行うでしょう。

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

// CSS

.bob{//whatever css styling} 
.jek{//whatever css styling}