如何在javascript中處理輸入元素狀態的編程式更改

我遇到了奇怪的問題。當用戶更改表單上的複選框輸入元素時，會產生足夠的事件編程更改。我應該如何面對這個挑戰？下面的代碼：如何在javascript中處理輸入元素狀態的編程式更改

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

更新我不控制元素的變化，我只需要處理它們。這是我寫的通用計劃代碼。

來源

2008-12-30 Artem Tikhomirov

這是不可能的JavaScript語言中的跟蹤對象的狀態，因爲它可以做在Objective-C（KVO）中。也不可能使用DOM功能--DOM不會在每個屬性更改上觸發事件 - 相反，它僅觸發某些用戶操作的事件：鼠標單擊，按鍵或頁面生命週期及其派生。

每次她修改某些屬性時，都可以實現只有觸發事件。當然，這可以用AnthonyW瓊斯提到的功能來封裝。

來源

2010-01-20 15:27:14

在這種情況下，您不應該在事件處理函數本身中編寫邏輯。你應該把任何這樣的邏輯放在一個單獨的函數中。同樣，你不應該把代碼，在代碼的其它順序編程直接操縱的複選框值，但它抽象成另一個功能： -

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

    });

來源

2008-12-30 13:11:59 AnthonyWJones

使用觸發功能觸發上的複選框單擊事件。您不需要獲取現有狀態，因爲該複選框只會通過點擊進行切換。

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

來源

2008-12-30 13:12:49 tvanfosson

在問題和標籤中沒有提到jQuery。 – Alternatex 2015-10-16 11:53:13

jQuery核心庫方法.val（）不觸發change事件。如果您提供自己的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; 
    }; 
})();

來源

2010-01-19 14:42:59

如何在javascript中處理輸入元素狀態的編程式更改

回答

相關問題