Question

我有一个小问题，即onclick函数无法同时对html文档进行两次不同的更改。需要的是 - 点击链接应该切换父元素的“活动”类并切换各个隐藏div的可见性。我得到的是每次连续点击交替进行的更改（我在下面提供了jsfiddle链接）。工作正常，直到我添加了nearest（）（或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>

这是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/

Answer 1

工作示例： 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 2

您将“active”类添加到元素中，然后将其用作targetElement中选择器的一部分，因此targetElement将是：$（'。w-argle active'），它不存在。试试这个。

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

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];

或者您可以使用元素上的HTML5数据简单地添加targetElement类。

我修改了你的例子，这里是链接：

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

jQuery只需单击一下即可切换两个元素

5 个答案: