隱藏/顯示切換jQuery不切換？

我知道這很容易做到，我敢肯定我錯過了一些顯而易見的事情，但我希望使用jQuery切換來隱藏/顯示4個不同的div。隱藏/顯示切換jQuery不切換？

我有一個小提琴去這裏：http://jsfiddle.net/4SDesignStudio/agjqj80t/

我缺少什麼？

HTML：

<ul class="wine-filters"> 
    <li style="float:left; margin-right:1.5em;">Filters:</li> 
    <li class="button-row red-filter">Reds</li> 
    <li class="button-row white-filter">Whites</li> 
    <li class="button-row sparkling-filter">Sparkling</li> 
    <li class="button-row dessert-filter">Dessert</li> 
</ul> 

<div class="red-wine"> 
    ** A bunch of <article> sections with each red wine ** 
</div> 

<div class="white-wine"> 
    ** A bunch of <article> sections with each white wine ** 
</div> 

<div class="sparkling-wine"> 
    ** A bunch of <article> sections with each sparkling wine ** 
</div> 

<div class="dessert-wine"> 
    ** A bunch of <article> sections with each dessert wine ** 
</div>

的jQuery：

var $redFilter = $('red-filter'); 
var $whiteFilter = $('white-filter'); 
var $sparklingFilter = $('sparkling-filter'); 
var $dessertFilter = $('dessert-filter');  
var $redWine = $('.red-wine'); 
var $whiteWine = $('.white-wine'); 
var $sparklingWine = $('.sparkling-wine'); 
var $dessertWine = $('.dessert-wine'); 


// Event handlers - Wine Filters 

$redFilter.on('click', function(event) { 
$redWine.toggle('show'); 
$whiteWine.toggle('hide'); 
$sparklingWine.toggle('hide'); 
$dessertWine.toggle('hide'); 
}); 

$whiteFilter.on('click', function(event) { 
$redWine.toggle('hide'); 
$whiteWine.toggle('show'); 
$sparklingWine.toggle('hide'); 
$dessertWine.toggle('hide'); 
}); 

$sparklingFilter.on('click', function(event) { 
$redWine.toggle('hide'); 
$whiteWine.toggle('hide'); 
$sparklingWine.toggle('show'); 
$dessertWine.toggle('hide'); 
}); 

$dessertFilter.on('click', function(event) { 
$redWine.toggle('hide'); 
$whiteWine.toggle('hide'); 
$sparklingWine.toggle('hide'); 
$dessertWine.toggle('show'); 
});

來源

2014-12-24 sforcash

嗯，你的前四個jQuery選擇缺少領先期。例如：'var $ redFilter = $（'red-filter'）;'應該是'var $ redFilter = $（'。red-filter'）;'。 – j08691

var $ redFilter = $（'red-filter'）;應該閱讀var $ redFilter = $（'。red-filter'）; – xeo

其次，'.toggle（）不接受顯示/隱藏字符串，但它確實接受真/假布爾值。 – j08691

Updated JSFiddle

我認爲你正在使用.toggle()錯誤。根據是否顯示/隱藏，切換將隱藏/顯示元素。既然你已經知道你要與你的切換來完成什麼，爲什麼不去做這樣的：

$redFilter.on('click', function(event) { 
    $redWine.show(); 
    $whiteWine.hide(); 
    $sparklingWine.hide(); 
    $dessertWine.hide(); 
});

由於.toggle('hide');不應該工作（？）。

而且，按照註釋：

var $redFilter = $('.red-filter'); 
var $whiteFilter = $('.white-filter'); 
var $sparklingFilter = $('.sparkling-filter'); 
var $dessertFilter = $('.dessert-filter');

缺少關於你的第4個變量的.選擇上課。

來源

2014-12-24 19:27:03

我認爲切換也不會像這樣工作，但它似乎工作。 – nima

@nima是的，我在'.toggle（）函數中檢查了文檔，沒有看到它們接受'show'或'hide'作爲參數，但似乎確實起作用。很奇怪。 –

我認爲即使它有效，但使用未公開的功能並不是一個好主意，OP應該按照您所說的使用show/hide。 – nima

這四行中的選擇器缺失'。'

var $redFilter = $('red-filter'); 
var $whiteFilter = $('white-filter'); 
var $sparklingFilter = $('sparkling-filter'); 
var $dessertFilter = $('dessert-filter');

添加期間，例如.red-filter進行修復。

來源

2014-12-24 19:28:42

正如我上面的評論有兩個問題：

你的前四個jQuery選擇缺少主導時期。例如：var $redFilter = $('red-filter');應該是var $redFilter = $('.red-filter');。
.toggle()不接受顯示/隱藏字符串，但它確實接受真/假布爾值。

但是如果你只需要添加一個數據屬性列表項（例如），你可以減少了jQuery：

$('.button-row').click(function() { 
    $('ul ~ div').hide(); 
    $('.' + $(this).data('type')).show() 
})

jsFiddle example

來源

2014-12-24 19:33:12 j08691

隱藏/顯示切換jQuery不切換？

回答

相關問題