Question

我有一些重复按钮控制功能，如下所示，有没有办法迭代它们并减少代码量？

    $('[id$=cBC1]').change(function () {
      if ($(this).is(':checked')) {
        $(".cBC1_Row").prop("disabled", true); 
      }
      else {
        $(".cBC1_Row").prop("disabled", false);
      }
      $('select').material_select();
    });

    $('[id$=cBC2]').change(function () {
      if ($(this).is(':checked')) {
        $(".cBC2_Row").prop("disabled", true); 
      }
      else {
        $(".cBC2_Row").prop("disabled", false);
      }
      $('select').material_select();
    });

    ...

按要求添加HTML代码，它包含在visualforce页面中，每个复选框都将管理表格中同一行的文本字段。

      <table>
        ...
        <tbody>
          <tr>
            <td>
              <apex:inputCheckbox id="cBC1"/>
              <label for="j_id0:j_id1:cBC1"></label>
            </td>
            <td>
              <div class="input-field">
                <apex:inputField styleClass="validate cBC1_Row"/>
              </div>
            </td>
            <td>
              <div class="input-field">
                <apex:inputField styleClass="validate cBC1_Row"/>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <apex:inputCheckbox id="cBC2"/>
              <label for="j_id0:j_id1:cBC2"></label>
            </td>
            <td>
              <div class="input-field">
                <apex:inputField styleClass="validate cBC2_Row"/>
              </div>
            </td>
            <td>
              <div class="input-field inline">
                <apex:inputField styleClass="validate cBC2_Row"/>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

Answer 1

您可以删除选择器中的最后一个数字，并使用＆＃34;属性包含＆＃34;相反，假设您没有多个包含字符串cBC的元素另一个更好的选择是使用类

$('[id*=cBC]').on('change', function () {
    $(".cBC"+ this.id.match(/\d+$/)[0] +"_Row").prop("disabled", this.checked); 
    $('select').material_select();
});

Answer 2

是的，按照您的模式，您可以这样做：

for (let i = 1; i < amoutOfIds; i++) {
  $('[id$=cBC'+i+']').change(function () {
    if ($(this).is(':checked')) {
      $(".cBC"+i+"_Row").prop("disabled", true); 
    }
    else {
      $(".cBC"+i+"_Row").prop("disabled", false);
    }
    $('select').material_select();
  });
}

您必须正确设置amountOfIds，并且您也应该更改let i = 1以开始使用您拥有的第一个ID。

Answer 3

如果您可以重构事件处理程序以适用于每个元素，则可以编写单个jquery选择器并将相同的匿名事件处理程序绑定到这两个元素。如果没有看到脚本与之交互的元素的标记，很难确定这种重构是否可行。

Answer 4

从您的代码中可以看出ID是匹配的。为什么不使用：

$('[id^="cBC"]').change(function () {
   var _id = $(this).id();
   $("."+_id+"_Row").prop("disabled", $(this).is(':checked'));
  $('select').material_select();
  });

如何迭代js函数？

4 个答案: