jQuery一鍵切換兩個元素

我有一個小問題，這是onclick函數無法同時對html文檔做兩個不同的更改。需要的是 - 點擊鏈接應該切換「活動」類的父元素，並切換各個隱藏的div的可見性。我得到的是每次連續點擊交替進行的更改（我在下面提供了jsfiddle鏈接）。工作正常，直到我添加最接近（）（或父（））函數。我不知道發生了什麼事。希望得到一些幫助。jQuery一鍵切換兩個元素

這裏是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>

這裏是JS：

$(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/

來源

2013-06-29 alalpgrlv

您將「活動」類添加到元素，然後將其用作targetElement中選擇器的一部分，因此targetElement將作爲不存在的$（'。w-argle active'）。試試這個。

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

來源

2013-06-29 09:35:22 mkutyba

謝謝你，現在它似乎很明顯，我怎麼沒來這個自己:) – alalpgrlv

工作例如：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(); 
    }); 
});

來源

2013-06-29 09:35:19 sdespont

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

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

來源

2013-06-29 09:39:29

你要喜歡這個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); 
    }); 
});

來源

2013-06-29 09:41:23 yeyene

出現的問題，因爲你添加類活躍的parentElement。（這意味着第二次，你正在尋找一個存在的元素）。

你可以嘗試只得到一流

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

，或者你可以簡單的使用添加的元素HTML5數據targetElement類。

我修改你的例子，這裏是鏈接：

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

來源

2013-06-29 09:49:36

感謝您的幫助。 – alalpgrlv

jQuery一鍵切換兩個元素

回答

相關問題