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

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