切換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").html()與三級運營商的產品，用它來檢查#A1的文本的當前值。如果它是+，我將元素的文本設置爲-，否則，我將它設置爲+。

但是，你說「高效」。爲此，需要注意的是，如果要在同一個函數中使用兩次或多次選擇器，則應該將從給出的選擇器生成的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()方法的第二個參數）做檢查將保證你正在檢查的動畫完成後。

的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內容和工作過的容器的一種方法，類，所以你可以有這些多者在同一個頁面，只有這一段代碼：

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/