2016-09-19 7 views
2

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

<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> 
+1

「ele」を前に忘れましたか? .addClass( "left-float"); '? ...また、 'ele'がnullでないことを保証し、' ele.style.display'は確かに 'block'です...ところで、私はここで' jQuery'を見ません、バニラのみJS – Josh

+0

ちょうど'.addClass(" left-float ");'は正しい構文で、 '$(...)。addClass(" left-float ");'のようなドットの前にセレクタが必要です。 –

+1

[あなたのコンソールにエラーがないかどうか]を確認してください(http://stackoverflow.com/documentation/javascript/185/hello-world/714/using-console-log)。 –

答えて

2

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

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

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

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

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

Demo


は、 #

+0

ご協力ありがとうございます! –

1

使用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> 
0

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

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

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

これが役に立ちます。

関連する問題