javascriptで入力要素の状態のプログラムによる変更を処理する方法

StackOverflow https://stackoverflow.com/questions/400181

  •  03-07-2019
  •  | 
  •  

質問

奇妙な問題に直面しました。ユーザーがフォーム上のチェックボックス入力要素を変更しても、プログラムによる適切な変更は行われません。この課題にどのように取り組むべきですか？次のコード：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
  <script type="text/javascript">
    jQuery(document).ready(
      function() {        
        jQuery("#cb").change(
          function() {
            alert("Changed!"); 
            return true;
          }
        );
        jQuery("#b").click(
          function() {
            var newState = !jQuery("#cb").attr('checked');
            jQuery("#cb").attr('checked', newState);
          });
      });
  </script>
</head>
<body>
  <form action="#">
    <p>
      <input type="button" id="b" />
      <input type="checkbox" id="cb" />
    </p>
  </form>
</body>
</html>

更新 要素の変更を制御するのではなく、それらを処理するだけです。私が書いた一般的なコードです。

役に立ちましたか？

解決 4

Objective-C（KVO）で実行できるため、javascript言語内でオブジェクトの状態を追跡することは不可能です。 DOM機能を使用することもできません-DOMはプロパティが変更されるたびにイベントを発生させるのではなく、特定のユーザーアクション（マウスクリック、キーの押下、ページライフサイクルとその派生）でのみイベントを発生させます。

何らかのプロパティを変更するたびに、イベントの発生のみを実現できます。確かに、これはAnthonyWJonesが言及したように関数にカプセル化できます。

他のヒント

トリガー機能を使用して、チェックボックスでクリックイベントをトリガーします。クリックするだけでチェックボックスが切り替わるので、既存の状態を取得する必要はありません。

jQuery("#cb").trigger('click');

この場合、イベントハンドラー関数自体にロジックをコーディングしないでください。そのようなロジックは、別の関数に配置する必要があります。同様に、チェックボックスの値をプログラムで直接操作するコードを他のコードシーケンスに配置するのではなく、別の関数に抽象化する必要があります：-

jQuery(document).ready(
  function() {

    jQuery("#cb").change(
      function() {
        changeLogicForcb.call(this);
         return true; 
     }
    );

    jQuery("#b").click(
      function() {
         togglecb();            
      });

    function changeLogicForcb()
    {
         //something actually sensible here
         alert("changed!");
    }

    function togglecb()
    {
        var cb = jQuery("#cb");
        var newState = !cb.attr('checked');
        cb.attr('checked', newState);
        changeLogicForcb.call(cb.get(0));         
    }  

  });

jQueryコアライブラリメソッド.val（）はchangeイベントを起動しません。 jQueryの独自のコピーを提供する場合、ライブラリメソッドを変更できますが、おそらく賢明ではありません。代わりに、.val（）を活用する独自のバリューセッターを追加し、次の行に沿って何かを使用してchangeイベントを発生させることもできます。

jQuery.fn.xVal = (function() {
    return function(value) {
        // Use core functionality
        result = this.val.apply(this, arguments);
        // trigger change event
        if (result instanceof jQuery) {
              result.change();
        }
        return result;
    };
})();
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top