5

我正在尝试创建几个按钮，根据单击的按钮显示一个框。我这样做是通过给每个盒子自己的类并将参数传递给函数来识别哪个盒子是目标。然后，我将此函数分配给页面上每个按钮的 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 关键字时，它可以正常工作。

其次，该功能可以很好地淡化这些框，但如果我再次单击该按钮，则不会隐藏它们。

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

4

2 回答 2

3

解决方案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);
    }
};
于 2013-03-14T23:41:53.533 回答
1

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; }
于 2013-03-15T00:18:59.010 回答