jquery - 遍历一个数组，找到该数组中包含的每个 div 的选定选项值并分配背景颜色
问题描述
在一个 div 容器中，我有许多其他 div（它们是订单），其中包含 5 个其他 div，并且此 div 的第三个包含一个选择，我需要从中检查所选值以设置div class="order"依赖的背景颜色选定的值。
<div class="container-fluid form-inline" id="data">
<div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
</div>
<div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
</div>
<div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
</div>
<div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
</div>
</div>
每个div class="order"看起来都一样：
<div class="order" row-id="X" style="margin:0px; padding:0px; position: ">
<div class="col-md-1 sub_chkbox"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
这是第三行的选择：
<div class="row">
<div class="col-md-6 status">
<h5>Statut</h5>
<p>
<select disabled="" class=" form-control">
<option value="">Status</option>
<option value="1">A valider</option>
<option value="2">Non traitée</option>
<option value="3" selected="">En traitement</option>
<option value="4">Achevée</option>
<option value="5">Annulée</option>
</select>
</p>
</div>
</div>
因此要循环的数据如下所示：
<div class="container-fluid form-inline" id="data">
<div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
<div class="col-md-1 sub_chkbox"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row">
<div class="col-md-6 status">
<h5>Statut</h5>
<p>
<select disabled="" class=" form-control">
<option value="">Status</option>
<option value="1" selected="">A valider</option>
<option value="2">Non traitée</option>
<option value="3">En traitement</option>
<option value="4">Achevée</option>
<option value="5">Annulée</option>
</select>
</p>
</div>
</div>
<div class="row"></div>
<div class="row"></div>
</div>
<div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
<div class="col-md-1 sub_chkbox"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row">
<div class="col-md-6 status">
<h5>Statut</h5>
<p>
<select disabled="" class=" form-control">
<option value="">Status</option>
<option value="1">A valider</option>
<option value="2" selected="">Non traitée</option>
<option value="3">En traitement</option>
<option value="4">Achevée</option>
<option value="5">Annulée</option>
</select>
</p>
</div>
</div>
<div class="row"></div>
<div class="row"></div>
</div>
<div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
<div class="col-md-1 sub_chkbox"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row">
<div class="col-md-6 status">
<h5>Statut</h5>
<p>
<select disabled="" class=" form-control">
<option value="">Status</option>
<option value="1">A valider</option>
<option value="2">Non traitée</option>
<option value="3" selected="">En traitement</option>
<option value="4">Achevée</option>
<option value="5">Annulée</option>
</select>
</p>
</div>
</div>
<div class="row"></div>
<div class="row"></div>
</div>
<div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
<div class="col-md-1 sub_chkbox"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row">
<div class="col-md-6 status">
<h5>Statut</h5>
<p>
<select disabled="" class=" form-control">
<option value="">Status</option>
<option value="1">A valider</option>
<option value="2">Non traitée</option>
<option value="3">En traitement</option>
<option value="4" selected="">Achevée</option>
<option value="5">Annulée</option>
</select>
</p>
</div>
</div>
<div class="row"></div>
<div class="row"></div>
</div>
</div>
我现在需要找到每个选择的选定值，并根据选定的值为其分配不同的背景颜色div class="order"
<div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
</div>
我设法为一个带有 tr 和 td 的表做了它，并且它与这个 jQuery 函数一起工作得很好：
$(document).ready(function() {
$("tr").each(function(){
var col_val = $(this).find("td:nth-child(4)").text();
if (col_val == "A valider"){
$(this).css('background-color', '#ffe5e5');
$(this).find("td:nth-child(13) > div > a.btn.btn-xs.btn-success.btn-edit").hide();
} else if (col_val == "Non traitée"){
$(this).css('background-color', '#f6dcab');
$(this).find("td:nth-child(13) > div > a.btn.btn-xs.btn-success.btn-edit").hide();
// $(this).addClass('selected'); // the selected class color
} else if (col_val == "En traitement"){
$(this).css('background-color', '#d2d2f2');
$(this).find("td:nth-child(13) > div > a.btn.btn-xs.btn-success.btn-edit").hide();
// $(this).addClass('selected'); // the selected class color
} else if (col_val == "Achevée"){
$(this).css('background-color', '#c4ffc4');
// $(this).addClass('selected'); // the selected class color
}
});
});
但我不知道如何从这个 div 结构化表单开始。
我想我必须从以下开始：
$(document).ready(function() {
$("#data").each(function(){
var col_val = $(this).find("div > div:nth-child(4) > div.col-md-6.status > p > select > option:nth-child(4)").text();
但之后是个谜。我被困住了。
解决方案
你可以这样做：
// Get the selected option from all the selects
$('#data select option:selected').each( function() {
let selectedText = $(this).text();
let cssColor = 'white';
// Set the desired related text color
if(selectedText === 'A valider') {
cssColor = 'blue';
}
else if ( selectedText === 'Non traitée' ) {
cssColor = 'red';
}
// Cover other texts and colors as needed
// Apply the color to the related div with the order class
$(this).closest('div .order').css('background-color', cssColor)
});
该示例运行如下所示：
推荐阅读
- machine-learning - ValueError：所有输入数组在 onehotencoder 上的维数必须相同
- python - 创建用于安装 API 的 setup.py
- selenium - Macbook上chromedrive的路径？
- python - python从多个.gz文件中提取关键字
- android - 我无法将我的项目与 gradle 同步？
- node.js - 如何使用 Azure DevOps 管道运行 LUIS 调度模型的刷新
- c# - 切换 OnValueChanged 没有可用的功能
- excel - 两个 Excel 文件的排序不同
- java - 如何在同一主题上使用 globalKtable 和 StateStore？
- mysql - 选择列值等于某个值的所有可能的列值