Toggle innerHTML

Question

私は様々な例が私が探しているものに近づいてきたのを見てきましたが、それがどれほど正確に欲しいかを説明するものはありません。私はjQueryの初心者ですので、説明を歓迎します。

innerHTMLを-から+に切り替えるためにこれを探しています。誰でもこれを効率的に行う方法を知っていますか？

jQueryの/ JavaScriptの

$(document).ready(function() { 
      $(".A1").click(function() { 
       $(".P1").toggle("slow"); 
       $(".A1").html("+"); 
      }); 
     }); 

HTML

<div class="A1">-</div> 
<h2 class="H1">Stuff</h2> 
<div class="P1"> 
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff 
</div> 

は、HTML要素の内のテキストを切り替えるに関連するものが役立つもの、ありがとうございます。 =）

Answer 1

あなたが拡大お知らせしますクラスの追加について/ステータスを崩壊どのように？

Htmlの

<div class="A1 expanded">-</div> 
<h2 class="H1">Stuff</h2> 
<div class="P1"> 
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff 
</div> 

はJavaScript：

$(document).ready(function() { 
    $(".A1").click(function() { 
     var $this = $(this); 
     $(".P1").toggle("slow") 

     $this.toggleClass("expanded"); 

     if ($this.hasClass("expanded")) { 
      $this.html("-"); 
     } else { 
      $this.html("+"); 
     } 
    }); 
}); 

例：http://jsfiddle.net/sGxx4/

Answer 2

$(document).ready(function() { 
    $(".A1").click(function() { 
     $(".P1").toggle("slow"); 
     $(".A1").html(($(".A1").html() === "+" ? $(".A1").html("-") : $(".A1").html("+"))); 
    }); 
}); 

説明のビット：私は#A1のテキストの現在の値を確認するためにそれを使用して、三次事業者の製品に$("#A1").html()を設定しています。 +の場合は、要素のテキストを-に設定します。それ以外の場合は、+に設定します。

しかし、あなたは「効率的」と言いました。このため、同じ関数でセレクタを2回以上使用する場合は、変数に与えるセレクタの結果であるjQueryオブジェクトを格納する必要があります。毎回セレクタを再実行してください。ここではその修正とコードは次のとおりです。

$(document).ready(function() { 
    $(".A1").click(function() { 
     var $A1 = $(".A1"); 
     $(".P1").toggle("slow"); 
     $A1.html(($A1.html() === "+" ? $A1.html("-") : $A1.html("+"))); 
    }); 
}); 

Answer 3

コンテンツを切り替える方法はありません。 $（ '。P1'）が表示されているかどうかを確認し、それに応じて+/- divを変更することができます。以下のような

何か：

$(document).ready(function() { 
    $(".A1").click(function() { 
    $(".P1").toggle("slow", function(){ 
     if($(this).is(':visible')) 
      $(".A1").html("-") 
     else 
      $(".A1").html("+") 
    }); 
    }); 
}); 

アニメーションが完了した後、あなたがチェックしていることを保証するチェックを行うために、コールバック関数（.toggle()メソッドの第2引数）を使用します。

JsFiddle：http://jsfiddle.net/cy8uX/

Answer 4

より短いバージョン

$(document).ready(function() { 
    $(".A1").click(function() { 
     var $self = $(this); 
     $(".P1").toggle("slow", function () { 
      $self.html($self.html() == "-" ? "+" : "-"); 
     }); 
    }) 
}); 

Answer 5

はここで、親のクラス名やCSSルールを使用し、HTMLコンテンツを変更する必要はありませんし、容器をオフ動作する方法だと、クラスは、コードの唯一のこの1枚で、同じページにこれらの複数のものを持っていることができるように：

HTML：

<div class="container expanded"> 
    <div class="A1"> 
     <span class="minus">-</span> 
     <span class="plus">+</span> 
    </div> 
    <h2 class="H1">Stuff</h2> 
    <div class="P1"> 
    Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff 
    </div> 
</div>​ 

CSS：

.expanded .plus {display:none;} 
.collapsed .minus {display: none;} 

Javascriptを：

$(document).ready(function() { 
    $(".A1").click(function() { 
     $(this).closest(".container") 
      .toggleClass("expanded collapsed") 
      .find(".P1").slideToggle("slow"); 
    }); 
}); 

の作業のデモ：。http://jsfiddle.net/jfriend00/MSV4U/