0

やあみんな、私はまだ JavaScript に比較的慣れていないので、少し助けが必要です。私はいくつかの異なることを試しましたが、それを理解できないようです。commandHeld 関数に問題があります。関数の最初の部分で、クラスを「keyboard」または「keyboard_normal」から「keyboardCmd」に変更します。2 番目の部分では、h3 タグに記述した内容に基づいて、クラスを「keyboard」または「keyboard_normal」に戻します。2 番目の部分は、regress と呼ばれる別の関数に入れ、後で再利用する予定であるため、pressed というパラメーターを指定しました。

クラスは「keyboardCmd」に問題なく変更されますが、スパンをもう一度クリックしても、「keyboard」または「keyboard_normal」には変更されません。regress 関数の代わりに regress () のコードを commandHeld () に入れようとしましたが、クラスが "keyboardCmd" から "keyboard_normal" または "keyboard" に変更されてうまくいきませんでした。

「onclick」は私のcmdLeftおよびcmdRightスパンにあります。安全のためにcmdLeft_hoverとcmdRight_hoverスパンでも試​​してみましたが、どちらも役に立ちませんでした。

これまでのことを仮サイトに公開しました。これが役立つことを願っています。 http://keyboard.businesscatalyst.com/index.html

ここに私のHTMLがあります：

    <body>
    <h3 id = "changeH3Text" onClick="changeNameToLetters()">Regular Keyboard on Hover</h3>
      <div id="keyboardContainer" class="keyboard">
      <div class = "row6">

             <span id="cmdLeft" onClick="commandHeld()">
             <span class="hover"  id="cmdLeft_hover"></span>
             </span>


              <span id="cmdRight" onClick="commandHeld()">
             <span class="hover"  id="cmdRight_hover"></span>
             </span>
      </div><!--end of row 6 div-->
   </div><!--end of keyboardContainer div-->
</body>

これが私のJavaScriptです：

function changeNameToLetters() {
    //keyboard container variables
    var keyboardState = document.getElementById("keyboardContainer");
    var currentClass = keyboardState.className;

    //h3 text variables
    var h3Text = document.getElementById("changeH3Text");
    var currentText = h3Text.innerHTML;

    if (currentClass == "keyboard_normal" && currentText == "Tool Name on Hover") {
        keyboardState.className = "keyboard";
        h3Text.innerHTML = "Regular Keyboard on Hover";
    } //end if
    else {
        keyboardState.className = "keyboard_normal";
        h3Text.innerHTML = "Tool Name on Hover";
    } //end else
} //End function

function commandHeld() {
    //keyboard container variables
    var keyboardState = document.getElementById("keyboardContainer");
    var currentClass = keyboardState.className;

    //h3 text variables
    var h3Text = document.getElementById("changeH3Text");
    var currentText = h3Text.innerHTML;

    if (currentClass == "keyboard_normal" || "keyboard") {
        keyboardState.className = "keyboardCmd";

    } //End if
    else {
        regress('keyboardCmd');
    }

} //End function

function regress(pressed) {
    //keyboard container variables
    var keyboardState = document.getElementById("keyboardContainer");
    var currentClass = keyboardState.className;

    //h3 text variables
    var h3Text = document.getElementById("changeH3Text");
    var currentText = h3Text.innerHTML;

    if (currentText == "Tool Name on Hover" && currentClass == pressed) {

        keyboardState.className = "keyboard_normal";

    } //End if
    else {
        keyboardstate.className = "keyboard";
    }
} //End Function
4

1 に答える 1

0

Chrome コンソールを少し調べてみると、次のことがわかりました。

  1. コードに無効な条件があります (関数commandHeld)
  2. 関数にもタイプミスがありregressます (keyboardstate != keyboardState)

作業コード:

function changeNameToLetters() {
    //keyboard container variables
    var keyboardState = document.getElementById("keyboardContainer");
    var currentClass = keyboardState.className;

    //h3 text variables
    var h3Text = document.getElementById("changeH3Text");
    var currentText = h3Text.innerHTML;

    if (currentClass == "keyboard_normal" && currentText == "Tool Name on Hover") {
        keyboardState.className = "keyboard";
        h3Text.innerHTML = "Regular Keyboard on Hover";
    } //end if
    else {
        keyboardState.className = "keyboard_normal";
        h3Text.innerHTML = "Tool Name on Hover";
    } //end else
} //End function

function commandHeld() {
    //keyboard container variables
    var keyboardState = document.getElementById("keyboardContainer");
    var currentClass = keyboardState.className;

    //h3 text variables
    var h3Text = document.getElementById("changeH3Text");
    var currentText = h3Text.innerHTML;

    if (currentClass == "keyboard_normal" || currentClass == "keyboard") {
        keyboardState.className = "keyboardCmd";

    } //End if
    else {
        regress('keyboardCmd');
    }

} //End function

function regress(pressed) {
    //keyboard container variables
    var keyboardState = document.getElementById("keyboardContainer");
    var currentClass = keyboardState.className;

    //h3 text variables
    var h3Text = document.getElementById("changeH3Text");
    var currentText = h3Text.innerHTML;

    if (currentText == "Tool Name on Hover" && currentClass == pressed) {

        keyboardState.className = "keyboard_normal";

    } //End if
    else {
        keyboardState.className = "keyboard";
    }
} //End Function

デバッガーはあなたの友達です:)

于 2013-09-23T16:05:35.533 に答える