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);
    }
};

Answer 2

http://jsfiddle.net/fVENv/5/

我能看到这样做的最好方法是在页面加载时使用jquery添加一些隐藏文本，然后在点击时切换一个类（以及淡入淡出切换）。

html：

<p>Box 1</p>
<div></div><br/>
<p>Box 2</p>
<div></div><br/>
<p>Box 3</p>
<div></div><br/>

jquery：

$('p').append('<span class="show">Show</span><span class="hide">Hide</span>');
$('div').hide();
$('p').click(function () {
    $('p').click(false);
    $(this).toggleClass('hidden').next('div').fadeToggle(function(){
    $('p').click(true);
    });
});

css：

div {
    width:50px;
    height : 50px;
    background: red;
}
p {cursor:pointer;}
span { padding: 5px; margin-left:5px;}
p.hidden > .hide, p > .show  { display:inline }
p > .hide, p.hidden > .show { display: none; }

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

2 个答案:

解决方案1（所有jQuery）：

jsFiddle

溶液2（混合）：