jQuery - 在按钮单击中淡入和淡出不同的元素

Question

我正在尝试创建一些按钮,根据单击的按钮显示一个框.我这样做是通过给每个盒子自己的类并将一个参数传递给一个函数来识别哪个盒子是目标.然后我将此函数分配给页面上的每个按钮的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:

<span onclick="show(1)">Box 1</span>
<div class="box1"></div>

etc. for more boxes

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

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

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

Answer 1

解决方案1（全部jQuery）：

最简洁的方法是坚持使用 jQuery 进行点击处理。您已经在使用 jQuery 进行淡入淡出，为什么不利用它来绑定点击呢？尝试这个：

jsFiddle

<span>Box 1</span>
<div class="box1"></div><br/>
<span>Box 2</span>
<div class="box2"></div><br/>
<span>Box 3</span>

$('span').click(function () {
    var boxNumber = $(this).index('span') + 1;
    if ($(this).hasClass('shown')) {
        $(this).removeClass('shown');
        $(this).html('Show');
        $('.box' + boxNumber).fadeIn(1000);
    } else {
        $(this).html('Hide');
        $(this).addClass('shown');
        $('.box' + boxNumber).fadeOut(1000);
    }
});

注意：如果您希望淡出的框保留其在文档中的位置，请尝试使用fadeTo()。

解决方案 2（混合）：

但是，如果您确实需要使用该onclick属性来绑定单击处理程序（如示例中所示），则可以这样做：

jsFiddle

<span onclick="show(1,this)">Box 1</span>
<div class="box1"></div><br/>
<span onclick="show(2,this)">Box 2</span>
<div class="box2"></div><br/>
<span onclick="show(3,this)">Box 3</span>

function show(boxNumber, elem) {
    $this = $(elem);

    if ($this.hasClass('shown')) {
        $this.removeClass('shown');
        $this.html('Show');
        $('.box' + boxNumber).fadeIn(1000);
    } else {
        $this.html('Hide');
        $this.addClass('shown');
        $('.box' + boxNumber).fadeOut(1000);
    }
};