javascript - CSS と jQuery を使用してトグル ボタンを制御する

Question

このjsfiddleでわかるように、トグル スイッチ (ミュート ボタン) を作成しようとしています。

1. 現在の設定、つまりミュートまたはミュート解除を表示します
2. ホバーすると、代替が表示されます

ただし、私の問題は、ユーザーがボタンをクリックすると、反対のボタンが表示されるのではなく、反対のボタンがホバー状態であることを示しています。これが理にかなっているといいのですが、笑。基本的に相互作用は次のとおりです。

1. ミュート解除状態のビュー ボタン
2. カーソルを合わせると、ミュート アイコンが表示されます
3. ミュート状態のホバー画像であるため、クリックしてミュート解除アイコンを再度表示します
4. アイコンがホバーされていない場合、適切なアイコン、つまりミュートが表示されます

jsfiddle の例では、:hover 属性ではなく、クリックしてボタンを表示する必要があります...助けはありますか? 私は、この種のことは css だけでは処理できないことを認識しています.. (これが混乱しているように思われる場合は申し訳ありませんが、私は今日しばらくの間 codepeak で作業していました...)

Answer 1

次の代替ソリューションを検討してください。

• シングルボタンを使用
• ボタンの属性を操作.text()し.css()て変更する
• 必要な特殊なケースのために実装されたカスタム トグル

コードは次のとおりです。

CSS:

button { width: 200px; height: 60px; color: white; font-size: 20px; background-color: red; }

HTML:

<button class=''> Mute </button>

JS:

function unmute() {
    $('button').removeClass('muted');
    $('button').text('Unmute');
    $('button').css('background-color','blue');
}
function mute() {
    $('button').addClass('muted');
    $('button').text('Mute');
    $('button').css('background-color','red');
}

function customToggler() {
    if (disableToggle) return;
    if ($('button').hasClass('muted')) unmute(); else mute();
}

var disableToggle = false;

$(document).ready(function() {

    customToggler();

    $('button').click(function() {
       disableToggle = true;
       customToggler();
    });

    $('button').mouseover(function() {  
        customToggler();
    }).mouseout(function() {  
        customToggler();
        disableToggle = false;
    });
});

--

上記のコードの動作を確認するには、http://jsfiddle.net/fwjz5/を参照してください。</p>

Answer 2

さて、これが今のところ最短の解決策だと思います：

http://jsfiddle.net/4mK9q/

Answer 3

ホバー状態を JavaScript で処理し、CSS のものを削除できます。