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一键切换两个元素

回答

相关问题