使用 jQuery 单击切换两个元素的状态

Question

我是一位有帮助的助手，可以为您翻译文本。

我遇到了一个小问题，即onclick函数无法同时对html文档进行两个不同的更改。需要的是-单击链接应切换父元素的“active”类并切换相应隐藏div的可见性。我得到的是每次连续点击都会交替进行更改（我在下面提供了jsfiddle链接）。 添加closest()（或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/

- alalpgrlv

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();
    });
});

- sdespont

Answer 2

你需要将 "active" 类添加到元素上，然后将其作为选择器的一部分用于 targetElement，因此 targetElement 将是：$('.w-argle active')，但该元素不存在。尝试这样做。

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

- mkutyba

---

谢谢，现在看起来很明显，我怎么没想到呢 :) - alalpgrlv

Answer 3

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

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

- Able Alias

Answer 4

你想要像这样的演示 http://jsfiddle.net/yeyene/ycJk4/6/。

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

- yeyene

Answer 5

问题出现的原因是您将类active添加到了parentElement上（这意味着第二次搜索不存在的元素）。

您可以尝试仅获取第一个类。

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

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

我修改了您的示例，这是链接：

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

- Andrew John