使用jQuery更改选择时更改父级父类

Question

我想理想地使用一个触发器而不是一个条件，但是不确定如何对jQuery如此新颖，但是我想我会得到正确的逻辑..或从我想做的事情开始。

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

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

 .column.small { color: white; } .grey { background: grey } .green { background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 value="u" selected="selected">Updated</option> <option value="n">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 value="u" selected="selected">Updated</option> <option 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 value="u">Updated</option> <option value="n" selected="selected">New</option> </select> </div> </div> 

Answer 1

不需要那样做。 与parents尝试-

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

您也可以使用closest方法。 您应该使用方法链接。

$(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');
}

小提琴

Answer 2

您可以只使用.closest并将其与removeClass和addClass放在一行中

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

 .column.small { color: white; } .grey { background: grey } .green { background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 value="u" selected="selected">Updated</option> <option value="n">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 value="u" selected="selected">Updated</option> <option 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 value="u">Updated</option> <option value="n" selected="selected">New</option> </select> </div> </div> 

或带有.toggleClass事件，两个类都将被激活/停用

$(this).closest('.column').toggleClass('grey green');

Answer 3

尝试这个

 $('.column.small select').change(function() { $(this).parents('.column').toggleClass('grey green'); }); 

 .column.small { color: white; } .grey { background: grey } .green { background: green ; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 value="u" selected="selected">Updated</option> <option value="n">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 value="u" selected="selected">Updated</option> <option 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 value="u">Updated</option> <option value="n" selected="selected">New</option> </select> </div> </div> 

Answer 4

尝试：

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

    column.addClass('green');
  }

});

Answer 5

我已经完全更改了逻辑，以便它可以在加载时运行，并且现在更加动态，请在此处查看有效的jsFiddle：我已将其创建为函数，因此在加载时以及在更改时调用它，效果更好。

https://jsfiddle.net/wigster/6Lps0drd/2/

还必须为每个选项/选择添加一个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>

JS：

function selectBoxColourUpdate(optionSelected) {
  var selectedId = $('option:selected', optionSelected).attr('id');
  console.log(selectedId);
  if (selectedId == "u") {
    optionSelected.parent().parent().removeClass('grey');
    optionSelected.parent().parent().addClass('green');
  } else {
    optionSelected.parent().parent().removeClass('green');
    optionSelected.parent().parent().addClass('grey');
  }
}
$('.column.small select').on('change', function() {
  selectBoxColourUpdate($(this));
});
$( document ).ready(function() {
  $('.column.small select').each(function (){
    selectBoxColourUpdate($(this));
  })
});