如何在javascript中处理输入元素状态的编程更改_Javascript_Jquery_Html_Dom

如何在javascript中处理输入元素状态的编程更改

javascript jquery html dom

如何在javascript中处理输入元素状态的编程更改,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,我遇到了一个奇怪的问题。虽然用户更改表单上的复选框输入元素会产生足够的事件，但编程更改不会。我应该如何面对这一挑战？代码如下： <!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> <t

我遇到了一个奇怪的问题。虽然用户更改表单上的复选框输入元素会产生足够的事件，但编程更改不会。我应该如何面对这一挑战？代码如下：

<!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>


jQuery（文档）.ready(
函数（）{
jQuery（“#cb”）.change(
函数（）{
警报（“已更改！”）；
返回true；
}
);
jQuery（“#b”）。单击(
函数（）{
var newState=！jQuery（#cb”）.attr（'checked'）；
jQuery（“#cb”）.attr（'checked'，newState）；
});
});

更新

我不控制元素更改，我只需要处理它们。这是我编写的一般代码。

在这种情况下，您不应该在事件处理程序函数本身中编写逻辑代码。您应该将任何此类逻辑放在单独的函数中。类似地，您不应将通过编程直接操纵复选框值的代码放在其他代码序列中，而应将其抽象为另一个函数：-

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(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("#cb").trigger('click');

使用触发器功能触发复选框上的单击事件。您不需要获取现有状态，因为只需单击即可切换复选框

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

jQuery核心库方法.val（）不会触发更改事件。如果您提供自己的jQuery副本，您可以修改库方法，但这可能不是明智之举。相反，您可以添加自己的值设置器，该值设置器利用.val（），同时还可以使用以下内容触发更改事件：

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;
    };
})();

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;
    };
})();

在javascript语言中跟踪对象的状态是不可能的，因为它可以在Objective-C（KVO）中完成。也不可能使用DOM特性—DOM不会在每次属性更改时触发事件—相反，它只在某些用户操作上触发事件：鼠标单击、按键或页面生命周期及其派生

每次修改某些属性时，只能触发事件。当然，这可以像AnthonyWJones提到的那样封装在函数中。

不可能像在Objective-C（KVO）中那样在javascript语言中跟踪对象的状态。也不可能使用DOM特性—DOM不会在每次属性更改时触发事件—相反，它只在某些用户操作上触发事件：鼠标单击、按键或页面生命周期及其派生

每次修改某些属性时，只能触发事件。当然，这可以像AnthonyWJones提到的那样封装在函数中。

jQuery在问题和标记中都没有提到。@Alternatex但是，它在示例代码中被显式使用。There。现在它在标签里。@tvanfosson啊，好的。因为很难找到这个问题的特定于JavaScript的答案。问题和标记中都没有提到jQuery。@Alternatex但在示例代码中显式使用了它。There。现在它在标签里。@tvanfosson啊，好的。因为很难找到这个问题的特定于JavaScript的答案。