jQueryクラスがうまく機能しない

Question

何らかの理由で、クラスが追加されていないため、私のコードが機能しません。

<a>をクリックするとクラスを追加したいのですが、もう一度クリックすると削除されます。もう一度クリックすると追加されます。

私には何が欠けていますか？

HTML：

<a class="show-specs" id="displayText" href="javascript:toggle();">Show specs</a> 

スクリプト：

<script language="javascript"> 
function toggle() { 
    var ele = document.getElementById("toggleText"); 
    var text = document.getElementById("displayText"); 
    if(ele.style.display == "block") { 
      ele.style.display = "none"; 
      .addClass("left-float"); 
     text.innerHTML = "Show specs"; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "Hide specs"; 
    } 
} 
</script> 

Answer 1

あなたはそのようなjQueryのメソッドの前selectorを追加する必要があります。

$("#displayText").addClass("left-float"); 

文字列"#displayText"にid "displayText"で要素を選択することを意味します。

など.toggleClass()を使用してjQueryの中でこれを行うには良い方法がありますが：あなたとのhrefを交換するイベントハンドラをアタッチするためにjQueryを使用しているので

$("#displayText").click(function() { 
    $(this).toggleClass("left-float"); 
}); 

Demo

---

は、 #：

Answer 2

使用ele.className += "left-float";

<script language="javascript"> 
function toggle() { 
    var ele = document.getElementById("toggleText"); 
    var text = document.getElementById("displayText"); 
    if(ele.style.display == "block") { 
      ele.style.display = "none"; 
      text.className += "left-float"; 
     text.innerHTML = "Show specs"; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "Hide specs"; 
    } 
} 
</script> 

Answer 3

私はそれを見るように、ここで2つの問題があります。まず、コードにセレクタがありません.jqueryがバインドされているjQuery/$変数があります。実際には何も呼び出されていません。

2番目の問題は、あまりにも多くの伝統的なjavascriptをjqueryとミックスしているという事実と関係しています。これは、いくつかのものが動作しているように見え、他のものが失敗するように見えるという混乱を招きます。

ここに使用できる作業コードがあります。

これが役に立ちます。