javascript - 解除函数绑定(bind)时遇到问题

Question

我有 4 张人物图像，每个人都有 4 张与其对应的食物图像。当点击某人的名字时，他们的名字会加粗。如果您单击另一个名称，它会取消粗体。

我想做的第二件事是，当您点击每个人时，食物图像会切换。到目前为止，他们似乎只是在编译，而不是转储以前的。我尝试解除绑定(bind)拉入图像的函数，尝试在单击新名称时使图像消失，但我无法使其工作!

有人知道我能做什么吗？非常感谢所有帮助!

$(document).ready(function(){
  $('a').click(function(){
    $(".onclick").removeClass('onclick');
    $(this).addClass('onclick');
    return false;
  });
  $('#Jim').click(function(){
    groceryList (Jim);
    $("#Jim").unbind();
    return false;
  });
  $('#Jane').click(function(){
    groceryList (Jane);
    $("#Jane").unbind();
    return false;
  });
  $('#Bob').click(function(){
    groceryList (Bob);
    $("#Bob").unbind();
    return false;
  });
  $('#Roberta').click(function(){
    groceryList (Roberta);
    $("#Roberta").unbind();
    return false;
  });
});

Answer 1

您要做的不是取消绑定(bind)点击处理程序，而是在添加下一批项目之前清除食物区域:

function groceryList (a){
    "use strict";

    $('#food').children(':not(h2)').remove();
    // the rest of your function
}