jquery - 我怎样才能使这个蛮力的 jQuery 优雅化？

Question

我有一个 HTML 表格 here在“shift 1”部分的“Shift Details”的第一列中，有一个“Hide N”选择元素:

  <TR>
  <TD align="center" valign="middle" rowspan="30">
    some date
  </TD>
  <TD align="center" valign="middle" rowspan="10">
    shift 1
  </TD>
  <TD align="center" valign="middle" >
      <label>Hide </label>
    <select id="hideselector">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
      </select>
  </TD>

根据选择的选项，我的 jQuery 隐藏了它下面的标签，这些标签是这样定义的:

  <TD align="center" valign="middle" >
      <label id="jl1">job Loc 1</label>
  </TD>

准霍布斯式的 jQuery 令人讨厌和野蛮，但不幸的是并不短:

$('#hideselector').change(function () {

    $('#jl1').removeClass('hide');
    $('#jl2').removeClass('hide');
    $('#jl3').removeClass('hide');
    $('#jl4').removeClass('hide');
    $('#jl5').removeClass('hide');
    $('#jl6').removeClass('hide');
    $('#jl7').removeClass('hide');
    $('#jl8').removeClass('hide');
    $('#jl9').removeClass('hide');

    var hidecount = $('#hideselector').val();
    if (hidecount > 0) {
        $('#jl1').addClass('hide');
    }
    if (hidecount > 1) {
        $('#jl2').addClass('hide');
    }
    if (hidecount > 2) {
        $('#jl3').addClass('hide');
    }
    if (hidecount > 3) {
        $('#jl4').addClass('hide');
    }
    if (hidecount > 4) {
        $('#jl5').addClass('hide');
    }
    if (hidecount > 5) {
        $('#jl6').addClass('hide');
    }
    if (hidecount > 6) {
        $('#jl7').addClass('hide');
    }
    if (hidecount > 7) {
        $('#jl8').addClass('hide');
    }
    if (hidecount > 8) {
        $('#jl9').addClass('hide');
    }

});

上面的 jQuery 有效，但我希望有一种更简洁/更简洁的方法来完成同样的事情，特别是因为我最终需要 84 个非常相似的代码块(7 天 X 3 个轮类 X 每个轮类 4 个工作地点).

Answer 1

jQuery 可以一次对整组元素执行操作，因此无需对每个单元格单独调用 removeClass()，您可以对一个单元格调用一次 removeClass()捕获所有元素的选择器。

var cells = ["#jl1","#jl2","#jl3","#jl4","#jl5","#jl6","#jl7","#jl8","#jl9"];
$(cells.join(",")).removeClass('hide');

将元素 ID 放入数组中可以让您重构代码，如下所示:

$('#hideselector').change(function () {
    var cells = ["#jl1","#jl2","#jl3","#jl4","#jl5","#jl6","#jl7","#jl8","#jl9"];
    $(cells.join(",")).removeClass('hide');
    var hidecount = $('#hideselector').val();
    var i = -1;
    while(i++ < hidecount){
        $(cells[i]).addClass('hide');
    }
});

不过，我不会就此打住。如果您可以控制 HTML，我会向您要抓取的元素添加一些除 ID 之外的可选属性(例如另一个类名或 data- 属性)。然后，您不必维护元素 ID 列表，而只需维护一个较短的类/属性/任何列表。您甚至可以考虑将这些属性的存储卸载到选择元素本身，这样您就可以使用一个 onchange 函数来处理所有选择。

$('[data-shift]').change(function() {
  var cells = $("[data-lbl='" + this.getAttribute("data-shift") + "']");
  $(cells).removeClass('hide');
  var hidecount = this.value;
  var i = -1;
  while (i++ < hidecount - 1) {
    $(cells[i]).addClass('hide');
  }
});

table {
  width: 100%;
  border-collapse: collapse;
}
table td {
  border: 1px solid forestgreen;
}
.hide {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<TABLE COLS="3" id="sceduleTbl" name="sceduleTbl">
  <COLGROUP min-width="20%"></COLGROUP>
  <COLGROUP min-width="15%"></COLGROUP>
  <COLGROUP min-width="15%"></COLGROUP>
  <COLGROUP min-width="15%"></COLGROUP>
  <TR>
    <TD align="center" valign="middle">
      <B>SHIFTS</B>
    </TD>
    <TD align="center" valign="middle" colspan="4">
      <B>SHIFT DETAILS</B>
    </TD>
  </TR>

  <TR>
    <TD align="center" valign="middle" rowspan="10">
      shift 1
    </TD>
    <TD align="center" valign="middle">
      <label>Hide</label>
      <select class="hideselector" data-shift="shift 1 loc 1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
      </select>
    </TD>
    <TD align="center" valign="middle">
      <label>Hide</label>
      <select class="hideselector" data-shift="shift 1 loc 2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
      </select>
    </TD>
    <TD align="center" valign="middle">
      <label>Hide</label>
      <select class="hideselector" data-shift="shift 1 loc 3">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
      </select>
    </TD>
  </TR>
  <tr>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 1">job Loc 1</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 2">jobLoc2</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 3">jobLoc3</label>
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 1">job Loc 2</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 2">jobLoc2</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 3">jobLoc3</label>
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 1">job Loc 3</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 2">jobLoc2</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 3">jobLoc3</label>
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 1">job Loc 4</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 2">jobLoc2</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 3">jobLoc3</label>
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 1">job Loc 5</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 2">jobLoc2</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 3">jobLoc3</label>
    </TD>

  </tr>
  <tr>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 1">job Loc 6</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 2">jobLoc2</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 3">jobLoc3</label>
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 1">job Loc 7</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 2">jobLoc2</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 3">jobLoc3</label>
    </TD>

  </tr>
  <tr>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 1">job Loc 8</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 2">jobLoc2</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 3">jobLoc3</label>
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 1">job Loc 9</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 2">jobLoc2</label>
    </TD>
    <TD align="center" valign="middle">
      <label data-lbl="shift 1 loc 3">jobLoc3</label>
    </TD>
  </tr>

  <TR>
    <TD align="center" valign="middle" rowspan="10">
      shift 2
    </TD>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </TR>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>

  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>

  <TR>
    <TD align="center" valign="middle" rowspan="10">
      shift 3
    </TD>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </TR>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>

  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>
  <tr>
    <TD align="center" valign="middle">
      jobLoc1
    </TD>
    <TD align="center" valign="middle">
      jobLoc2
    </TD>
    <TD align="center" valign="middle">
      jobLoc3
    </TD>
  </tr>


</table>