javascript - JQuery - 更改 onchange 事件上划分行的颜色？

Question

我有一个要求，我必须根据下拉列表中的 onchange 值更改行 的颜色。我有行，其形式为division。有两个主要的分区，其中的行采用分区的形式，它们是之前的两个主要表。

现在，当我更改第一个division中row的combo中的值时，我想更改颜色整个分区 行的code>。另外，我还想更改第二个主要division中row的color。我可以轻松地使用tables来完成它，但是使用division我发现它很困难，而且我也不确定可行性。下面是我的代码结构和我用于更改颜色的 JQuery。

$('#bodyLeft tr').bind('click', function(e) {
  var bodyLeftTable = $("#bodyLeft tr").index(this);
  var vehicleClassVal = $("#bodyLeft tr:nth-child(" + bodyLeftTable + ")").find('.vehicleClass').val();
  if (scheduleStatusVal == 'Volvo') {
    $("#bodyLeft tr:nth-child(" + bodyLeftTable + ")").addClass("runningVehicleClass");
    $("#bodyRight tr:nth-child(" + bodyLeftTable + ")").addClass("runningVehicleClass");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--First Division-->
<div id="bodyLeft">
  <div class="divTableRow">
    <div class="divTableCell divWidth">
      <select class="vehicleClass">
                  <option value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option value="mercedes">Mercedes</option>
                  <option value="audi">Audi</option>
                </select>
    </div>
    <div class="divTableCell divWidth">
      <input type="text" name="address">
    </div>
    <div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
      <input type="text" name="pass">
    </div>
  </div>
  <div class="divTableRow">
    <div class="divTableCell divWidth">
      <select class="vehicleClass">
                  <option value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option value="mercedes">Mercedes</option>
                  <option value="audi">Audi</option>
                </select>
    </div>
    <div class="divTableCell divWidth">
      <input type="text" name="address">
    </div>
    <div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
      <input type="text" name="pass">
    </div>
  </div>
</div>
<!--Second Division -->
<div id="bodyRight">
  <div class="divTableRow">
    <div class="divTableCell width20">
      <input type="text" name="parts">
    </div>
    <div class="divTableCell width85">
      <input type="text" name="ischecked">
    </div>
    <div class="divTableCell width85" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
      <input type="text" name="validity">
    </div>
  </div>
  <div class="divTableRow">
    <div class="divTableCell divWidth">
      <input type="text" name="parts">
    </div>
    <div class="divTableCell divWidth">
      <input type="text" name="ischecked">
    </div>
    <div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
      <input type="text" name="validity">
    </div>
  </div>
</div>

Answer 1

那么，#bodyLeft tr 的目标到底是什么？

我可以在其中的任何地方看到 tr。

我假设您需要将点击绑定(bind)到#bodyLeft.vehicleClass？ 在 JS 代码中，检查每个选择器并使其与 HTML 中的结构匹配。

或者在其应该定位的位置发布表格的相关代码。

编辑:我刚刚再次阅读文本并注意到您曾经使用表格。是的，绝对重写您的查询选择器。无论是在您发布的 JS 中还是在其他代码中，不要忘记在使用时检查 CSS。