jQuery переключает два элемента одним щелчком мыши

Question

У меня есть небольшая проблема, которая является функцией onclick, которая не позволяет одновременно выполнять два разных изменения в html-документе. Что нужно - нажмите ссылку, чтобы переключить «активный» класс родительского элемента и переключить видимость соответствующего скрытого div. У меня есть изменения, которые меняются поочередно с каждым последующим щелчком (я предоставил jsfiddle ссылку ниже). Работал нормально, пока не добавил функцию closeest() (или parent()). Я понятия не имею, что происходит. Поблагодарили бы за помощь.

Вот HTML:

<div id="wrapper"> 
<div class="argle"><a href="#">Argle</a> 
</div> 
<div class="bargle"><a href="#">Bargle</a> 
</div> 
<div class="shmargle"><a href="#">Schmargle</a> 
</div> 
</div> 
<div id="windows"> 
<div class="w-argle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,</div> 
<div class="w-bargle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed  diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam er</div> 
<div class="w-shmargle">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,.</div> 
</div> 

Вот ЯШ:

$(function() { 
$('#wrapper a').click(function (event) { 
    event.preventDefault(); 
    var parentElement = $(this).closest('div'); 
    var targetElement = $('.w-' + parentElement.attr('class')); 
    parentElement.toggleClass('active'); 
    targetElement.toggle(); 
}); 

}); 

Интернет здесь: http://jsfiddle.net/alalpgrlv/ycJk4/4/

Answer 1

Вы добавляете к элементу класс «active», а затем используете его как часть селектора в targetElement, поэтому targetElement будет выглядеть следующим образом: $ ('. W-argle active'), который не существует. Попробуйте это.

cls = (parentElement.attr('class').split(" "))[0]; 
var targetElement = $('.w-' + cls); 

Answer 2

Рабочий пример: DEMO

$(function() { 
    $('#wrapper a').click(function (event) { 
     event.preventDefault(); 
     var parentElement = $(this).closest('div'); 
     var targetElement = $('.w-' + parentElement.attr('class')); 

     //Hide all other div 
     $('[class^=w-]').not(targetElement).hide(); 

     //Remove active class 
     $('#wrapper').find('div').not(parentElement).removeClass('active'); 

     //Toggle clicked link 
     parentElement.toggleClass('active');   
     targetElement.toggle(); 
    }); 
}); 

Answer 3

$(".argle").click(function(){ 
$("#windows").find('.w-argle').slideToggle(); 
}); 

http://jsfiddle.net/ablealias/zCFff/1/

Answer 4

Вы хотите, как этот DEMO http://jsfiddle.net/yeyene/ycJk4/6/

$(function() { 
    $('#wrapper a').click(function (event) { 
     $('#windows div').slideUp(); 
     $('#windows .w-'+$(this).parent('div').attr('class')).slideToggle(500); 
    }); 
}); 

Answer 5

появляется проблема, потому что вы добавляете класс активного к parentElement. (это означает, что во второй раз вы ищете существующий элемент).

Вы можете попытаться получить только первый класс

parentElement.attr('class').split(" "))[0]; 

или вы можете просто добавить класс targetElement с использованием данных HTML5 на элементе.

Я изменил свой пример, вот ссылка:

http://jsfiddle.net/ycJk4/7/