Javascript 使用jQuery更改select时更改父类

我希望在理想情况下使用切换而不是条件，但不确定jQuery的新功能，但我认为我得到了正确的逻辑。。或者开始做我想做的事

默认情况下，父级为灰色，表示“已更新”和“新”为绿色，因此是否希望根据设置的内容以及在“更改”中选择时切换类

$（'.column.small select'）.on（'change'，function（）{
if（$（this.parent（）.hasClass（'grey'））{
$（this.parent（）.parent（）.removeClass（'grey'）；
$（this.parent（）.parent（）.addClass（'green'）；
}
});
.column.small{
颜色：白色；
}
格雷先生{
背景：灰色
}
格林先生{
背景：绿色；
}

更新
新的
更新
新的
更新
新的
不需要这样做。与父母一起尝试

$('.column.small select').on('change', function() {
  if ($(this).parents('.column').hasClass('grey')) {
    $(this).parents('.column').removeClass('grey');
    $(this).parents('.column').addClass('green');
  }
});

您也可以为此使用
最接近的
方法。你应该使用方法链接

$(this).closest('.column').removeClass('grey').addClass('green');

如果您多次使用同一个对象，他们会尽量避免多次查找DOM元素，以减少执行过程。你可以这样做-

var parent_div= $(this).parents('.column');
if (parent_div.hasClass('grey')) {
   parent_div.removeClass('grey');
   parent_div.addClass('green');
}

没必要那样做。与父母一起尝试

$('.column.small select').on('change', function() {
  if ($(this).parents('.column').hasClass('grey')) {
    $(this).parents('.column').removeClass('grey');
    $(this).parents('.column').addClass('green');
  }
});

您也可以为此使用
最接近的
方法。你应该使用方法链接

$(this).closest('.column').removeClass('grey').addClass('green');

如果您多次使用同一个对象，他们会尽量避免多次查找DOM元素，以减少执行过程。你可以这样做-

var parent_div= $(this).parents('.column');
if (parent_div.hasClass('grey')) {
   parent_div.removeClass('grey');
   parent_div.addClass('green');
}

试试：

$('.column.small select').on('change', function() {
  var column = $(this).closest('.column');
  column.removeClass('green');
  if ($(this).find(':selected').text() == "New") {

    column.addClass('green');
  }

});

尝试：

您只需使用
.closest
，并使用
removeClass
和
addClass


$（'select'）。在（'change'，function（）上{
if（$（this）.closest（'.column'）.hasClass（'grey'））{
$（this）.closest（'.column'）.removeClass（'grey'）.addClass（'green'）；
}
});
.column.small{
颜色：白色；
}
格雷先生{
背景：灰色
}
格林先生{
背景：绿色；
}

更新
新的
更新
新的
更新
新的
您只需使用
.closest
，并使用
removeClass
和
addClass


$（'select'）。在（'change'，function（）上{
if（$（this）.closest（'.column'）.hasClass（'grey'））{
$（this）.closest（'.column'）.removeClass（'grey'）.addClass（'green'）；
}
});
.column.small{
颜色：白色；
}
格雷先生{
背景：灰色
}
格林先生{
背景：绿色；
}

更新
新的
更新
新的
更新
新的
试试这个


$（'.column.small select'）.change（function（）{
$（this）.parents（'.column'）.toggleClass（'grey-green'）；
});
.column.small{
颜色：白色；
}
格雷先生{
背景：灰色
}
格林先生{
背景：绿色；
}

更新
新的
更新
新的
更新
新的
试试这个


$（'.column.small select'）.change（function（）{
$（this）.parents（'.column'）.toggleClass（'grey-green'）；
});
.column.small{
颜色：白色；
}
格雷先生{
背景：灰色
}
格林先生{
背景：绿色；
}

更新
新的
更新
新的
更新
新的
我已经完全更改了逻辑，使其在加载时运行，而且现在更加动态，请参见此处的一个工作JSFIDLE：
我已经将它创建为一个函数，所以它在加载时被调用，在更改时也被调用，这会更好


还必须为每个选项/选择添加一个id：

<div class="column small grey">
  <div class="form-group">
    <select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control">
      <option id="u" value="u">Updated</option>
      <option id="n" value="n" selected="selected">New</option>
    </select>
  </div>
</div>

<div class="column small grey">
  <div class="form-group">
    <select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control">
      <option id="u" value="u" selected="selected">Updated</option>
      <option id="n" value="n">New</option>
    </select>
  </div>
</div>

<div class="column small green">
  <div class="form-group">
    <select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control">
      <option id="u" value="u">Updated</option>
      <option id="n" value="n" selected="selected">New</option>
    </select>
  </div>
</div>

我已经完全改变了逻辑，使它可以在负载上运行，而且现在更具动态性，请参见此处的工作JSFIDLE：
我已经将它创建为一个函数，所以它在加载时被调用，在更改时也被调用，这会更好


还必须为每个选项/选择添加一个id：

<div class="column small grey">
  <div class="form-group">
    <select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control">
      <option id="u" value="u">Updated</option>
      <option id="n" value="n" selected="selected">New</option>
    </select>
  </div>
</div>

<div class="column small grey">
  <div class="form-group">
    <select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control">
      <option id="u" value="u" selected="selected">Updated</option>
      <option id="n" value="n">New</option>
    </select>
  </div>
</div>

<div class="column small green">
  <div class="form-group">
    <select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control">
      <option id="u" value="u">Updated</option>
      <option id="n" value="n" selected="selected">New</option>
    </select>
  </div>
</div>

当您更改上一个下拉列表值时，它不是working@KrupeshKotecha它没有改变，因为OP没有提供任何信息，说明他是否想将
切换
它重新打开
选项
的
更改为
更新
是的，我知道。但它在功能上是错误的。因为它必须在选择时切换changed@KrupeshKotecha如果是这种情况，他可以只使用
$（this）.closest（'.column'）.toggleClass（'grey-green'）行，不带任何检查条件
hasClass
。从功能上讲，OP甚至没有指定……）当您更改上一个下拉列表值时，它不是working@KrupeshKotecha它没有改变，因为OP没有提供任何信息，说明他是否想将
切换
它重新打开
选项
的
更改为
更新
是的，我知道。但它在功能上是错误的。因为它必须在选择时切换changed@KrupeshKotecha如果是这种情况，他可以只使用
$（this）.closest（'.column'）.toggleClass（'grey-green'）行，不带任何检查条件
hasClass
。从功能上讲，OP甚至没有指定……）一个简短的建议。。如果以下任何答案对您有所帮助，则您需要向上投票并将其标记为答案，可能是最早且有效的答案：）一个简短的建议。。如果以下任何答案对您有所帮助，则您需要向上投票并将其标记为答案，可能是最早且有效的答案：）一些注释或解释如果选择的文本为“新建”，则更好添加绿色背景，否则删除它一些注释或解释如果选择的文本为“新建”，则更好添加绿色背景，否则删除它