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()的{{1}}应用新的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();的调用以重置事件，因此两者都不会发生。

如何在click和mouseover方法之间切换？

2 个答案: