2

解決済み:

助けようとしたすべての人に感謝します

このコードを追加すると、うまくいきました：

$(function() {
$( ".itemContainer" ).click(function() {
    $(this).toggleClass( "showtheitem", 800 ),
    $(this).prev(".itemContainer").toggleClass("hide"),
    $(".itemContainer").not(this).prev(".itemContainer").removeClass("hide"),    

     $(".itemContainer").not(this).removeClass("showtheitem");
    return false;
});});

http://jsfiddle.net/JKnjz/3/でどのように機能するかを確認できます

クリックして前の項目にクラスを追加し、再度クリックした後に削除するクラスを追加したいと考えています。しかし、他のすべてのアイテムをクリックして前のアイテムにクラスを追加すると、そのクラスも削除されます....

コードで説明しようとします。私は7つのdivを持っています

<div class="itemContainer">1</div>
<div class="itemContainer">2</div>
<div class="itemContainer">3</div>
<div class="itemContainer">4</div>
<div class="itemContainer">5</div>
<div class="itemContainer">6</div>
<div class="itemContainer">7</div>

CSS:

.itemContainer {float:left;width:100px;height:100px;background:#000;margin:5px;color:#fff}
.hide {display:none;}
.showtheitem {width:200px;height:200px;}

Javascript:

$(function() {
    $( ".itemContainer" ).click(function() {
        $(this).toggleClass( "showtheitem", 800 ),
        $(this).prev(".itemContainer").toggleClass("hide"),
         $(".itemContainer").not(this).removeClass("showtheitem");
        return false;
    });
});

たとえば、div 番号 2 をクリックすると、クラス「非表示」が div 番号に追加されます。1. div no. をクリックすると 2 その hide クラスを削除します。その部分は大丈夫です。

しかし、div noをクリックすると問題が発生します。2 div 番号に「hide」のクラスを追加します。1で、たとえばdiv no.6をクリックすると。クラス「隠す」はまだdivに残っています。いいえ1。

他のすべてのdivをクリックすると、クラス「非表示」が削除されます。

ここでは、jsfiddle.net/JKnjz/1 がどのように機能するかを確認できます。

明確な例を挙げていただければ幸いです:)

4

5 に答える 5

1

デモ リンクを参照してください........,:)

http://api.jquery.com/toggleClass/

于 2012-11-21T06:23:18.050 に答える
0

必要な動作が実際に何であるかはわかりませんが、「hide」クラスを削除することはそれほど難しくありません。あなたはこのようにそれを行うことができます：

$(function() {
    $( ".itemContainer" ).click(function() {
        $(this).toggleClass( "showtheitem", 800 );
        $('.itemContainer.hide').removeClass('hide');
        $(this).prev(".itemContainer").toggleClass("hide");
        $(".itemContainer").not(this).removeClass("showtheitem");
        return false;
    });
});

重要なのは、必要なdivの非表示を開始する前に、すべての非表示アイテムの「hide」クラスを削除することです。最初にすべての非表示を解除し、次に必要なものを非表示にすると、その1つだけが非表示になります。

他の予想される動作は、正確に何が欲しいかについてより多くの説明を与える場合に最適です...

于 2011-10-07T00:17:56.680 に答える
0

誤解していなければ、目標はユーザーが項目 N をクリックしたときです。

  • アイテムを非表示 N-1
  • N-1 以外の隠しアイテムをすべて表示

権利？したがって、答えは非常に明確です。

$(function() {
    $( ".itemContainer" ).click(function() {
        $(".itemContainer.showtheitem").removeClass("showtheitem");
        $(this).toggleClass( "showtheitem", 800 )
        $(this).prev(".itemContainer").toggleClass("hide"),
        return false;
    });
});
于 2011-10-07T11:46:12.577 に答える
0

Like Sander, I can't quite understand what you're asking for. Below is another approach, I've taken away the "toggleClass" business because maybe it's the part that's confusing. It sounds like the rules you want are:

  1. Only one item can have the class showtheitem at a time
  2. The item "before" the current item with class showtheitem should have the class hide added to it

If I've understood you right, how does this look?

$(".itemContainer").click(function() {
    $(this).siblings('.itemContainer').removeClass('hide');
    $(this).prev(".itemContainer").addClass("hide");
    $('.showtheitem').removeClass('showtheitem');
    $(this).addClass( "showtheitem", 800 );
});

If I haven't understood, please leave a comment and we'll get there.

于 2011-10-07T00:32:24.270 に答える
0

これを行う

$(function() {
        $( "div.itemContainer").click(function() {
            $prevDiv = $(this).prev('div');
            $prevDiv.toggleClass('hide');
            $prevDiv.siblings().removeClass('hide');
            //return false;
        });
});

デモ

于 2011-10-07T12:27:54.070 に答える