1

私はこのようなdivのリストを持っています：

<div class="item">Click</div>
<div class="content">Hidden Content</div>
<div class="item">Click</div>
<div class="content">Hidden Content</div>
<div class="item">Click</div>
<div class="content">Hidden Content</div>
<div class="item">Click</div>
<div class="content">Hidden Content</div>
<div class="item">Click</div>
<div class="content">Hidden Content</div>

ページが読み込まれると、IDコンテンツを持つ最初のdivが表示されます。私がやりたいのは、他のdiv（id = "item"）をクリックして、前にクリックしたアイテムのコンテンツを非表示にし、前にクリックしたdiv（id = "item"）に変更を加えることです。これまで私はこれを試しました：

$(document).ready(function(){
        $(".item").first().css("border-right","none");
        $(".item").click(function(e) {
        $pressed = $(this);
             if ($pressed.data("lastclick")){
                    $pressed.data("lastclick").css("border-right","solid");
                    $pressed.data("lastclick").css("border-right-width","1px");
                    $pressed.data("lastclick").find("span").remove();
             } 
    $(this).next(".content").slideToggle(\'slow\', function() {
                 if ( $(this).is(":visible")) {
                      $pressed.css("border-right","none");
                      $pressed.append(\'<span style="float:right;font-weight:bold">\'+$(this).children().length+\'</span>\');
                      $pressed.data("lastclick",$pressed);    
            }
            });});});
4

2 に答える 2

5

最後にクリックしたアイテムを単純なJavaScript変数に保存します

var lastClicked;
$(".item").click(function(e) {
    $(this). // Do your stuff to the clicked element here

    // Then do what you will to the last-clicked element
    // ...

    // And finally assign the clicked element to the lastClicked variable
    lastClicked = clicked;
}

いくつかの役立つヒント：

  • コメントで述べたように、。はクラスセレクターで、＃はIDセレクターです。あなたの例では、クラスセレクターを使用してIDで要素を選択しようとしていました。

  • 私が持っているところでは$(this)、オペレーターを連鎖させることができます。つまり、CSS演算子を残りの演算子とチェーンし、セレクターを繰り返す代わりに、コマンドの1つのチェーン行を1つ持つことができます（これはパフォーマンスの無駄です）。

  • .css（）コマンドで「マップ」を使用して、次のように一度に複数のスタイルを適用できます。

.css（{border-right：'solid'、border-right-width： '1px'}）

...しかし、あなたの場合のように、あなたは単に境界線を変更しているので、あなたは単にこれを行うことができます（そしてそうすべきです）：

border-right: 1px solid black;
于 2012-10-31T18:49:32.517 に答える
1

これに近いことをすることで、コードを単純化することができます。

JSFIDDLE

$('.item').click(function(){
  $('.content').slideUp();
  $(this).next('.content').slideDown()        
})​
于 2012-10-31T18:47:12.717 に答える