1

ここの私のコードhttp://jsfiddle.net/GKZRU/14/ すべてのjsが正常に機能し、cssクラスを追加/削除します（chrome jsコンソールでこれを確認します）が、非アクティブなスタイルは適用されません:(ラジオボタンフィールドの灰色の背景が欲しい選択されていません。

4

3 に答える 3

4

これは、左側のパネルのjsFiddleコントロールを介してコードを「DOMready」ハンドラーに配置したためです。関数はグローバルではありません。

関数の定義を変更してみてください。それ以外の

function surpClassAdd() {

試す

window['surpClassAdd'] = function() {

さて、明らかに実際のコードではそれを行う必要はありません。もう1つの（より良い）アイデアは、「onchange」属性を使用してイベントハンドラーをバインドするのをやめ、jQueryで処理を実行することです（とにかくライブラリを使用しているため）。ハンドラーを「準備完了」ハンドラーの要素にバインドします。関数はグローバルである必要はありません（とにかく面倒で厄介です）。

于 2011-02-26T13:51:04.037 に答える
2

コードにはいくつかの問題があります。

1.サイドバーで選択onDomReadyしたため、定義した関数はグローバルではありません。no wrap (head)代わりに使用してください。

注: jQuery のメソッドを使用する場合は、これらの関数をグローバルに宣言する必要はありません.bind()(#5 を参照)。

2. CSS ペインに<style>andは必要ありません。</style>

3.ラジオ ボタンにクラスを追加していますが、これは効果がありません。次のようにする必要があります。

HTML

<input type='radio' id='foo' name='mybtns' /> <label for='foo'>Label</label>

JavaScript

$('label[for=foo]').addClass('active').removeClass('inactive');

または、この場合、<td>要素でそれを行います。

4.これは単なるスタイリング上の問題ですが<p>text</p>、単純なテキスト ノード ( ) の代わりに段落 ( )を使用textし、各行の後に改行を入れる必要があります。

5.インライン イベント ハンドラーとインライン スタイルを使用しない場合は、代わりに CSS と JS コードを別のファイルに記述し、次のように参照します。

<link rel='stylesheet' href='http://example.com/css/default.css' />
<script src='http://mysite.com/js/default.js'></script>

すでに jQuery を使用しているため、インライン イベント ハンドラーを回避するのは簡単です。jQuery の.bind()関数を使用すると、すべてのブラウザーで動作します。

$('#el').bind('click', function() {
    // your event handler goes here
});

一部のイベント ハンドラ ( click、keyup、 などchange) には略記があります。

$('#el').click(function() {
    // your event handler goes here
});

6. レイアウトにテーブルを使用する必要がありますか? いいえ、この場合はフォームを使用することをお勧めします。

7. 2 つの関数を記述する代わりに、[docs]を.addClass('active').removeClass('inactive')使用すると、2 つではなく1 つの関数を使用できます。.toggleClass('active inactive')

于 2011-02-26T14:02:10.973 に答える
1

jsFiddleでも機能させることができ、HTMLではなくjavascriptで関数をバインドするだけです。簡単な例を次に示します。重複を削除するために少しクリーンアップしました：http： //jsfiddle.net/GDPvU/1/

いくつかの注意：

  • 背景色が（入力ではなく）親要素に移動されました
  • <style>jsFiddleCSSパネルでタグを使用する必要はありません
于 2011-02-26T14:07:49.447 に答える