javascript – JS数组适用于一个函数,但不适用于另一个函数

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – JS数组适用于一个函数,但不适用于另一个函数，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5018字，纯文字阅读大概需要8分钟。

内容图文

我的JS功夫不存在所以我来寻求帮助.我有一个form.php页面,其中我有大约20个输入字段;但是,如果单击一个单选按钮,则需要禁用这些输入字段的一半以上.这是我到目前为止所拥有的：

  <script type="text/javascript" charset="utf-8">
    // create an array of all elementId's that need to be disabled/enabled based on whether radio button TR 280 or 284 is selected
    let fieldsAffected = [ 'f2Cct2Or4Wire2W', 'f2Cct2Or4Wire4W', 'f3Cct2Or4Wire2W', 'f3Cct2Or4Wire4W', 'f4Cct2Or4Wire2W', 'f4Cct2Or4Wire4W' ];

    function eqptTypeVal() { // FUNC to check the state of eqptType when page first loads and disabling/enabling required fields as necessary
      var rs = document.querySelector( 'input[ name = "eqptType" ]:checked' ).value;
      if ( rs == '280' ) {
        for ( let i = 0; i < fieldsAffected.length; i++ ) {
          document.getElementById( fieldsAffected[ i ] ).setAttribute( 'disabled', true );
        } // close FOR
      } else {
        for ( let i = 0; i < fieldsAffected.length; i++ ) {
          document.getElementById( fieldsAffected[ i ] ).removeAttibute( 'disabled' );
        } // close FOR
      } // close IF
    } // close FUNC eqptTypeVal
    window.onload = eqptTypeVal;

    $( document ).ready( function() { // FUNC to monitor 280 radio button and when clicked disable the elementIds in array fieldsAffected
      $( '#eqptType280' ).click( function() {
        for ( let i = 0; i < fieldsAffected.length; i++ ) {
          $( fieldsAffected[ i ] ).setAttribute( 'disabled', true );
        } // close FOR
        /*
        $( '#f2Cct2Or4Wire2W' ).attr( 'disabled', true );
        $( '#f2Cct2Or4Wire4W' ).attr( 'disabled', true );
        $( '#f3Cct2Or4Wire2W' ).attr( 'disabled', true );
        $( '#f3Cct2Or4Wire4W' ).attr( 'disabled', true );
        $( '#f4Cct2Or4Wire2W' ).attr( 'disabled', true );
        $( '#f4Cct2Or4Wire4W' ).attr( 'disabled', true );
         */
      });
    }); // close docReady FUNC

    $( document ).ready( function() { // FUNC to monitor 284 radio button and when clicked enable the elementIds in array fieldsAffected
      $( '#eqptType284' ).click( function() {
      for ( let i = 0; i < fieldsAffected.length; i++ ) {
        $( fieldsAffected[ i ] ).setAttribute( 'disabled', false );
      } // close FOR
      /*
        $( '#f2Cct2Or4Wire2W' ).attr( 'disabled', false );
        $( '#f2Cct2Or4Wire4W' ).attr( 'disabled', false );
        $( '#f3Cct2Or4Wire2W' ).attr( 'disabled', false );
        $( '#f3Cct2Or4Wire4W' ).attr( 'disabled', false );
        $( '#f4Cct2Or4Wire2W' ).attr( 'disabled', false );
        $( '#f4Cct2Or4Wire4W' ).attr( 'disabled', false );
       */
      });
    }); // close docReady FUNC
  </script>

JS实际上在没有fieldsAffected数组的情况下工作,使用较低的两个JS函数中的注释掉的块.但是因为如果选择了280单选按钮,我将有一个很长的elementIds列表来禁用,那么我想使用数组和循环来管理受影响的elementIds的禁用启用.

数组必须是好的,因为它在第一个JS函数中用于检查280单选按钮是否被选中,具体取决于mysql数据,当页面首次加载时,禁用 – 按预期启用数组中的elementIds.但是之后点击280或284按钮,使用以下两个JS函数中的相同数组,在初始页面加载后单击280或284单选按钮时,不会发生数组元素的更改.

但是数组似乎不起作用的第2和第3个函数必须正常,因为没有数组,并且所有elementIds逐个列出,只要单击280或284单选按钮,输入字段就会禁用 – 启用.

但我对JS一无所知.任何人都可以帮助指出我的黑客攻击中丢失的语言的一些可能的细微差别我上面粘贴的数组和函数？

< === HTML添加===>

<fieldset class="fieldsetToneRemote">
      <legend>Eqpt ID</legend>
      <div class="formRowDiv">
        <label>
          <span>Eqpt Type:</span>
          <input type="radio" id="eqptType280" name="eqptType"  value="280"
            <?php
            if ( $_SESSION[ 'eqptType' ] == "280" ) {
                echo ' checked';
              }
            ?>
          >
          <span class="radioLabel">280</span>
          <input type="radio" id="eqptType284" name="eqptType" value="284"
            <?php
            if ( empty( $_SESSION[ 'eqptType' ] ) || is_null( $_SESSION[ 'eqptType' ] ) ) {
              echo ' checked';
            } elseif ( $_SESSION[ 'eqptType' ] == "284" ) {
                echo ' checked';
              }
            ?>
          >
          <span class="radioLabel">284</span>
        </label>
      </div><!-- close formRowDiv -->

解决方法:

>没有window.onload AND document.ready
>干 – 不要重复自己
>当您使用jQuery选择ID时,您在前面缺少“#”
>我使用.each减少了代码和复杂性
>不要删除要切换的属性

// create an array of all elementId's that need to be disabled/enabled based on whether radio button TR 280 or 284 is selected
var fieldsAffected = ['f2Cct2Or4Wire2W', 'f2Cct2Or4Wire4W', 'f3Cct2Or4Wire2W', 'f3Cct2Or4Wire4W', 'f4Cct2Or4Wire2W', 'f4Cct2Or4Wire4W'];

function eqptTypeVal() { // FUNC to check the state of eqptType when page first loads and disabling/enabling required fields as necessary
  var rs = $('input[name="eqptType"]:checked').val() == 280;
  $.each(fieldsAffected, function(i, val) {
    $("#" + val).prop('disabled', rs);
  })
} // close FUNC eqptTypeVal

$(function() { // when page loads
  eqptTypeVal(); // run the function
  // when either radio is clicked, run the function
  $('input[name="eqptType"]').on("click", eqptTypeVal);
}); // close docReady FUNC

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" name="eqptType" value="280" checked/>280</label>
<label><input type="radio" name="eqptType" value="284" />284</label><br/>
<input id="f2Cct2Or4Wire2W" /><br/>
<input id="f2Cct2Or4Wire4W" /><br/> 
<input id="f3Cct2Or4Wire2W" /><br/> 
<input id="f3Cct2Or4Wire4W" /><br/> 
<input id="f4Cct2Or4Wire2W" /><br/> 
<input id="f4Cct2Or4Wire4W" /><br/>

内容总结

以上是互联网集市为您收集整理的javascript – JS数组适用于一个函数,但不适用于另一个函数全部内容，希望文章能够帮你解决javascript – JS数组适用于一个函数,但不适用于另一个函数所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端