JS関数が呼び出されないようです。

私は1つの要素しか持たない配列を持っています（結局、配列を展開します）。最初の段階で、配列の要素がポップアウトされ、要素が "F2"と一致すると、が見つかり、ボールが表示されます。しかし、ボールは現れません。 JSとjQueryを一緒に使用しているので、私のjsコードが心配です。 jQueryをJSのライブラリとして考えることはできますが、ここで問題があるかどうかはわかりません。私がJSコードをデバッグする方法は、alert()の束を投げて、どのラインに接続するのかを調べることです。alert()が呼び出されないので、問題はありますが、もう一度、私はそれが最高ですJSにはIDEがないからです。JS関数が呼び出されないようです。

$(document).ready(function() { 
 
    var notes = ["F2"]; 
 
    if($("#" + notes.pop()).innerHTML == "F2") { 
 
    $("#F2").addClass("shown") 
 
    } else { 
 
    $("#F2").removeClass("shown"); 
 
    } 
 
});

#F2 { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #ccc; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 

 
.not_shown { 
 
    display: none; 
 
} 
 

 
.shown { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div id="ball"> 
 
    <div id="F2" class="not_shown"></div> 
 
</div>

出典

2016-11-21 vkosyj

は、あなたがタグ名' F2'を持つすべての要素を取得しています。 '$（notes.pop（））'を '$（ '＃' +音符）に変更してください。pop（）） ' –

ありがとうございます。それは間違いなく問題ですが、それを修正しても、まだ間違っています。 – vkosyj

@vkosyjあなたのコードに正確に何をしたいですか？ – kevin628

divにコンテンツを追加したり、divのコンテンツと比較する必要はありません。あなたがIDで選択しているので、IDを比較して比較してください。

$(document).ready(function() { 
    var notes = ['F2'], 
     $el; 

    // When selecting an element with jQuery, do it just once and 
    // then reference it as much as you want 
    $el = $('#' + notes.pop()); 

    // Use strict comparison unless you have an excellent reason not to (rare) 
    if($el.get(0).id === 'F2') { // Just compare the ID, not sure why we need to even look at the content here 
     $el.addClass('shown'); 
    } else { 
     $el.removeClass('shown'); 
    } 
});

デバッグに関しては、ブラウザのDevToolsを使用してコードをステップ実行する必要があります。これにより、実行の特定のポイントで値を検査することができ、デバッグが容易になります。

編集：あなた `if`状態でFiddle with working code

出典

2016-11-21 02:53:12 godfrzero

私は考えが好きですが、ボールは表示されません。 – vkosyj

@vkosyjテストされていないコードを投稿するための私のせいで、修正されました。 – godfrzero

@ godrzeroもう一度ありがとうございます。感謝します。 – vkosyj

$(document).ready(function() { 
    var notes = ["F2"]; 
    if($('#' + notes.pop()).innerHTML == 'F2') { 
     $('#F2').addClass('shown') 
    } else { 
     $('#F2').removeClass('shown'); 
    } 

});

私はuが私はコード内のいくつかの問題を参照してくださいセレクタ

出典

2016-11-21 02:14:38 Bruce

ありがとうございます。それは間違いなく問題ですが、それを修正しても、まだ間違っています。 – vkosyj

で＃を逃すと思います。

最初$('#' + notes.pop()).innerHTMLが正しくありません。 $('#' + notes.pop()).html()である必要があります。

divには、F2のテキストがありません。従って($('#' + notes.pop()).html() == 'F2')は常に失敗します。

少し修正しました。あなたの質問から

#F2 { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #ccc; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
} 
 
.not_shown { 
 
    display: none; 
 
} 
 
.shown { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link type="text/css" rel="stylesheet" href="code.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
    <script type="text/javascript" src="code_js.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="ball"> 
 
    <div id="F2" class="not_shown">F2</div> 
 
    </div> 
 
</body> 
 

 
</html> 
 
<script> 
 
    $(document).ready(function() { 
 
    var notes = ["F2"]; 
 
    debugger; 
 
    if ($('#' + notes.pop()).html() == 'F2') { 
 
     $('#F2').addClass('shown') 
 
    } else { 
 
     $('#F2').removeClass('shown'); 
 
    } 
 

 
    }); 
 
</script>

出典

2016-11-21 02:38:16

'.innerHTML'の使用が間違っている理由を詳しく説明できますか？ – godfrzero

ボールを表示したいので、実行した後にF2を隠す方法はありますか？ありがとうございました。 – vkosyj

@godfrzero $（ '＃F2'）は、innerHTMLが定義されていないことを表すjQueryオブジェクトを返します。 $（ '＃F2'）[0] .innerHTMLを試してみるとうまくいくでしょう。 –

私はあなたが配列要素をポップし、「F2」とそれを比較することを理解。一致する場合はdivクラスを変更します。

以下は、これを実現するための修正されたjavascriptコードです。

$(document).ready(function() { 
    var notes = ["F2"]; 
    if(notes.pop() === 'F2') { 
    $('#F2').addClass('shown') 
    } else { 
    $('#F2').removeClass('shown'); 
    } 
});

あなたはあなたがこれを試すことができますinnerHTML'.So」のuseageをmisunderstanded http://jsbin.com/nomavedamo/edit?html,css,js,output

出典

2016-11-21 02:45:09

で働い例を見つけることができます。

$(document).ready(function() { 
 
    var notes = ["F2"]; 
 
    if($('#' + notes.pop()).length) { 
 
     $('#F2').addClass('shown') 
 
    } else { 
 
     $('#F2').removeClass('shown'); 
 
    } 
 

 
});

ところで、そのようなので、上のブレークポイントを設定し、デバッグなどのjs、にちょうどクロムのdevのツールのようなものを使用することをお勧めします。 :)

出典

2016-11-21 02:48:47 tomasran

innerHTMLの使用。 https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML – tomasran

JS関数が呼び出されないようです。

答えて

関連する問題