我正在尝试创建一些按钮,根据单击的按钮显示一个框.我这样做是通过给每个盒子自己的类并将一个参数传递给一个函数来识别哪个盒子是目标.然后我将此函数分配给页面上的每个按钮的onclick属性(我知道我应该将事件处理程序附加到单独的文件中).这是功能：

var show = function(BoxNumber){
    if($(this).hasClass('shown')){
       $(this).removeClass('shown');
       $(this).html('Show');
       $('.Box'+BoxNumber).fadeOut(1000);
      }
    else{
       $(this).html('Hide');
       $(this).addClass('shown');
       $('.Box'+BoxNumber).fadeIn(1000);
      }
 };

html：

Box 1Box1">Boxes

但是,此功能不起作用.首先,this关键字似乎不是以按钮为目标,因为按钮的html在点击时不会改变.但是,当我用按钮的类替换this关键字时,它工作正常.

其次,该功能可以精确地淡化框,但如果再次单击该按钮则不会隐藏它们.

我被卡住了所以任何帮助将不胜感激！谢谢.