jquery添加和刪除類不工作

Question

我有一個關於在我的javascript代碼中添加和刪除類的問題。

我創造了這個DEMO從 codepen.io

所以，你可以在演示中看到有一個點擊此處鏈接。當您單擊然後jquery鏈接做

$(document).ready(function() { 
    $('.buton').click(function (event) { 
    event.preventDefault(); 
     $('.vduzalani').animate({'opacity':'.50'}, 300, 'linear'); 
     $('.vduzalani').css('display', 'block'); 
     $(this).next('.yazi-paylas').toggleClass('in'); 

    })  
}); 

那麼問題是，我想一個.in從.yazi-paylasdiv添加標籤。什麼是我的javascript代碼問題

Answer 1

這是因爲.buton是其母公司和.next()唯一的子節點將返回任何結果，如在您的標記中看到：

<div class="container"> 
    <div class="buton"><a href="#">Click Here</a></div> 
    <!-- .buton is the ony sibling! --> 
</div> 
<div class="yazi-paylas">ssss</div> 
<div class="vduzalani"></div> 

Y您可以同時使用.parent('.container')（或只是.parent()）或.closest('.container')去一個級別，並選擇.container眼前的兄弟姐妹：

$(document).ready(function() { 
    $('.buton').click(function (event) { 
    event.preventDefault(); 

    // You can use chaining, so you don't have to fetch $('.vduzalani') twice 
    $('.vduzalani') 
    .animate({'opacity':'.50'}, 300, 'linear') 
    .css('display', 'block'); 

    // Tranverse DOM 
    $(this).parent().next('.yazi-paylas').toggleClass('in'); 
    // or 
    // $(this).closest('.container').next('.yazi-paylas').toggleClass('in'); 
    }); 
}); 

見演示小提琴這裏：http://jsfiddle.net/teddyrised/0g9385k1/

Answer 2

請嘗試：

$('.yazi-paylas').toggleClass('in'); 

，而不是

$(this).next('.yazi-paylas').toggleClass('in'); 

Answer 3

評估父拿到.yazi-paylas元素。你的代碼更改爲：

$(this).parent().next('.yazi-paylas').toggleClass('in'); 

或者，如果它不事父，只是做：

$('.yazi-paylas').toggleClass('in'); 

Answer 4

嘗試用它來取代您的線路：

$(this).parent().next('.yazi-paylas').toggleClass('in'); 

$（本）在這種情況下，實際上比您嘗試選擇的元素更深一層。