0

HTML と jQuery を使用してフォームを作成しました。このフォームは、ユーザーのためにその場で見積もりを生成するように設計されています。

また、jQuery iPhone Style Checkboxes (iSC) を使用してチェックボックスのスタイルを設定したいと思います。

jQuery Price Calculator Pro (PCP) と iSC を実装しました。iSC が実装されていない場合、システムは完全に機能しますが、iSC が実装されると、価格の変更 (右上に表示) はトリガーされなくなります。

これは、イベントが .click によってトリガーされたためだと思いましたが、そうではないことがわかりました。

以下を実装することができました。これにより、PCP が機能するために必要なものをトリガーするコード行を追加できます。

$(window).load(function() {             

var onchange_checkbox = ($('#eCommerce')).iphoneStyle({
    onChange: function() { 
            if ($('#eCommerce').is(':checked')) {
                $('#eCommerce-Output').removeClass('dispnone');
                console.log('eCommerce is on');
        } 
            else { 
            $('#eCommerce-Output').addClass('dispnone');
            console.log('eCommerce is off');
            };
    }
});

コンソールを介してページのライブ バージョンで確認できるように、iPhone のトグルが切り替えられると、上記が完全にトリガーされます。

上部にあるスタイルなしのチェックボックスをオンにすると、iPhone のトグルに何をさせたいかを確認できます。計算に関連する .js ファイルは、ここにあります。

どんな助けでも大歓迎です。

4

2 に答える 2

2

フォーム入力のいずれかの変更イベントがトリガーされるたびに、価格が更新されます。そのため、iphone スタイルのチェックボックスが変更されたときに、このイベントを手動でトリガーする必要があります。

編集: iPhone Style Checkboxes は、実際にはチェックボックス要素を最初のパラメーターとして onChange 関数に渡します。this キーワードは期待どおりに機能しません。それに応じて回答を更新しました。

var onchange_checkbox = ($('#eCommerce')).iphoneStyle({
    onChange: function(input) { 
        input.trigger('change');
    }
});

これが役立つことを願っています！

ベン。

于 2012-09-27T05:08:04.020 に答える
0

ウィジェット化されたDOMを調べると、次のことが機能するはずだと私は信じています。

$(function() {             
    var onchange_checkbox = ($('#eCommerce')).iphoneStyle({
        onChange: function() { 
            $(this).closest('.iPhoneCheckContainer').find('input').trigger('change');
        }
    });
});

それが機能する場合、これは「onChange」ハンドラーという点で一般的な解決策になります。

  • 要素IDについての仮定はありません
  • クリックされたウィジェットに関連して機能し、ウィジェットが作成された（そしてまだ存在している）基になる入力要素（チェックボックス/ラジオボタン）を見つけ、その変更イベントをトリガーします。
于 2012-09-27T08:53:31.153 に答える