3

onclick 関数が html ドキュメントに同時に 2 つの異なる変更を加えることができないという小さな問題があります。必要なのは - リンクをクリックすると、親要素の「アクティブな」クラスを切り替え、それぞれの非表示の div の可視性を切り替える必要があります。私が得たのは、連続するクリックごとに交互に変更が行われることです（以下のjsfiddleリンクを提供しました）。私が最も近い（）（または親（））関数を追加するまではうまくいきました。何が起こっているのかわかりません。助けていただければ幸いです。

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/

4

5 に答える 5

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();
    });
});
于 2013-06-29T09:35:19.270 に答える
1

「アクティブ」クラスを要素に追加し、それを targetElement のセレクターの一部として使用するため、targetElement は $('.w-argle active') になります。これは存在しません。これを試して。

cls = (parentElement.attr('class').split(" "))[0];
var targetElement = $('.w-' + cls);
于 2013-06-29T09:35:22.487 に答える
1 
$(".argle").click(function(){
$("#windows").find('.w-argle').slideToggle();
});

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

于 2013-06-29T09:39:29.553 に答える
0

あなたはこのデモ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-29T09:41:23.147 に答える
0

クラスアクティブをparentElementに追加するため、問題が発生します。(つまり、2 回目は、存在しない要素を検索しています)。

あなたは最初のクラスだけを取得しようとすることができます

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

または、要素に HTML5 データを使用して targetElement クラスを簡単に追加できます。

私はあなたの例を修正しました、ここにリンクがあります：

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

于 2013-06-29T09:49:36.760 に答える