0

私は2つのボタンを持っています: 

<button id="Ck">Click</button>
<button id="Me">Mouseenter</button>

この 2 つのボタンのいずれかをクリックして、jQuery アニメーション メニュー (クリック時またはマウス入力時) を開く方法をユーザーが選択できるようにしたいと考えています。

これらの方法を切り替える方法はありますか? そして、ページが更新されてもこれらの選択を維持するにはどうすればよいですか?

4

2 に答える 2

1

簡単に。

まず、ボタンにクラスを与えます。

<button id="Ck" class="ClickMouseenter">Click</button>
<button id="Me" class="ClickMouseenter">Click</button>

次に、ボタンがクリックされたときに id を確認し、適切に割り当てます。

$('.ClickMouseenter').on('click',function(){
    var id = this.id,
        $menu = $('#MenuExample');

    $menu.off();
    if(id==='Ck'){
        $menu.on('click',function(){
             // click magic;
        });
    } else {
        $menu.on('mouseenter',function(){
            // mouseenter magic;
        });
    }
});

または、異なるハンドラーで同じ機能を実行する場合:

// yay for faster code processing!
$('.ClickMouseenter').on('click',function(){
    var id = this.id,
        action = (id==='Ck' ? 'click' : 'mouseenter');

    $('#MenuExample').off().on(action,function(){
        // action magic;
    });
});

は既存の.off()割り当て (clickまたは) を削除し、クリックしたに応じてmouseenter新しいハンドラが適用されます。.on()idbutton

ページの更新時にこれらの設定を維持することに関して...私の最初の傾向は使用していますsessionStorage（注：これはIE8以降でのみ機能します。IE6またはIE7用にコーディングしている場合は運が悪いです）。sessionStorage割り当てを含むイベントから関数を作成します。

function setMenu(action){
    $('#MenuExample').off().on(action,function(){
        // action magic;
    });
    sessionStorage.menuType = action;
}

$('.ClickMouseenter').on('click',function(){
    var id = this.id,
        action = (id==='Ck' ? 'click' : 'mouseenter');

    setMenu(action);
});

また、ページの読み込み時に呼び出して、必要に応じてデフォルトのフォールバックを使用して選択肢を再割り当てできます。

if(sessionStorage.length > 0){
    setMenu(sessionStorage.menuType);
} else {
    setMenu('mouseenter');
}

これは明らかに単純化しすぎたバージョンですが、最初にアイデアを提供する必要があります。

于 2013-06-19T15:12:11.473 に答える
0

クリックされた方に基づいてメニューを設定するだけです。

function SetupClick() {
  // Setup click functionality here
}

function SetupMouseover() {
  // Setup mouseover functionality here
}

$('#Ck').click(function() {
  SetupClick();
  // Optionally, save choice
  localStorage['userchoice'] = 'click';
});
$('#Me').click(function() {
  SetupMouseover();
  // Optionally, save choice
  localStorage['userchoice'] = 'mouseover';
});

選択肢をサーバー側に保存するか、 HTML5 Local Storageを使用できますが、古いブラウザーではサポートされていません。選択を保存した場合は、ドキュメントの読み込み時に関数をセットアップする必要があります。

$(document).load(function() {
  if (localStorage && localStorage["userchoice") {
    if (localStorage["userchoice"] == 'click') {
      SetupClick();
    }
    else if (localStorage["userChoice"] == 'mouseover') {
      SetupMouseover();
    }
  }
});

更新されたjsFiddleへのリンクは次のとおりです。コードを少し整理し$('#Wp').off();、イベントをリセットするための呼び出しを追加して、両方が発生しないようにしました。

于 2013-06-19T15:05:53.350 に答える