jquery - 如何在 click 和 mouseenter 方法之间切换？

Question

我有两个按钮：

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

我想让用户有机会通过单击这两个按钮之一来选择如何打开我的 jQuery 动画菜单（单击或鼠标输入）。

有没有办法在这些方法之间切换？即使刷新页面，我必须做些什么才能保留这些选择？

Answer 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()根据您单击id的应用新的处理程序。button

关于在页面刷新时保留这些设置...我的第一个倾向是使用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');
}

这显然是一个过于简化的版本，但应该给出一个开始的想法。

Answer 2

您只需根据单击的内容设置菜单：

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();来重置事件，这样两者都不会发生。