我希望理想情况下使用切换而不是条件，但不确定jQuery的新功能如何，但我认为我正在获得正确的逻辑......或者开始使用我想做的事情。
默认情况下，父级父级为灰色，用于＆＃34;更新＆＃34;和＆＃34;新＆＃34;是绿色所以想要根据什么设置和选择更改时切换类？
$('.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>
答案 0 :(得分：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');
}
答案 1 :(得分：1)
您可以使用.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');
答案 2 :(得分：1)
试试这个
$('.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>
答案 3 :(得分：0)
尝试：
$('.column.small select').on('change', function() {
var column = $(this).closest('.column');
column.removeClass('green');
if ($(this).find(':selected').text() == "New") {
column.addClass('green');
}
});
答案 4 :(得分：0)
我完全改变了逻辑，以便它在负载下运行，而且它现在更加动态，请在这里查看一个有效的jsFiddle： 我已将其创建为一个函数，因此它会在加载时调用，也会在更改时调用，这样会好得多。
https://jsfiddle.net/wigster/6Lps0drd/2/
还必须为每个选项添加一个/选择：
<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));
})
});