jQuery的：點擊

Question

後未觸發事件在行動：http://3.alphenweer.nl/weer/
代碼：

$(document).ready(function(){ 
     $('.categorie[data-cat]').click(function(){ 
      $('#cat-'+ $(this).attr('data-cat')).slideToggle('slow'); 
     }); 
    }); 

 

<span class="categorie" data-cat="nieuws">Nieuws</span> 
<div class="box" id="box-nieuws"> 
    <a href="/pages/nieuws/nieuws/alphen.php">Alphen</a> 
    <a href="/pages/nieuws/nieuws/nederland.php">Nederland</a> 
</div> 

問題：當我點擊菜單按鈕（在例如：點擊'Neerslag'或'Satteliet'）沒有任何反應。我認爲選擇者不正確，但應該是。你們能幫我嗎？

Answer 1

已經發現了問題：

$(document).ready(function(){ 
    $('.categorie[data-cat]').click(function(){ 
     $('#cat-'+ $(this).attr('data-cat')).slideToggle('slow'); 
    }); 
}); 

在第三行中，$('#cat-' ...應該是$('#box-'

Answer 2

我覺得你有點困惑。看起來您想要使用點擊的數據屬性.categorie來滑動相應的元素。所以，你可以這樣做：

$('.categorie[data-cat]').click(function(){ 
    $('div[id=box-"' + $(this).attr('data-cat') + '"]').slideToggle('slow'); 
}); 

或者，假設你已經公佈了一個一致的結構，也可以是簡單的：

$('.categorie[data-cat]').click(function(){ 
    $(this).next(".box").slideToggle('slow'); 
});