我有不止一张卡片,每张卡片里面都有一个 Select 元素。当用户从 Select 元素中选择一个选项时,卡片标题会改变颜色;但是,它也会更改所有其他卡片标题。我怎样才能将它们分开?
[data-background-color='empty'] {
background-color: #595959;
color: white;
}
[data-background-color='icu'] {
background-color: #9933ff;
color: white;
}
[data-background-color='med'] {
background-color: #0066ff;
color: white;
}
<div class="card">
<div class="card-header" data-background-color="empty">
<select class="form-select form-select-sm" aria-label=".form-select-sm example" id="unitSelect">
<option selected value="0">Empty</option>
<option value="1">ICU</option>
<option value="2">Med</option>
</select>
<!--some other content-->
</div>
</div>
$('#unitSelect').on('change', function() {
switch ($(this).val()) {
case '0':
$('.card-header').attr('data-background-color', 'empty');
break
case '1':
$('.card-header').attr('data-background-color', 'icu');
break;
case '2':
$('.card-header').attr('data-background-color', 'med');
break;
}
});
答案 0 :(得分:1)
不要使用选择器 $('.card-header')
,而是使用正在更改的 select 元素的 parent(),如 $(this).parent().attr('data-background-color', 'empty');
这只会影响被更改的 select 元素的 .card-header。
$('.form-select').on('change', function() {
switch ($(this).val()) {
case '0':
$(this).parent().attr('data-background-color', 'empty');
break
case '1':
$(this).parent().attr('data-background-color', 'icu');
break;
case '2':
$(this).parent().attr('data-background-color', 'med');
break;
}
});
[data-background-color='empty'] {
background-color: #595959;
color: white;
}
[data-background-color='icu'] {
background-color: #9933ff;
color: white;
}
[data-background-color='med'] {
background-color: #0066ff;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-header" data-background-color="empty">
<select class="form-select form-select-sm" aria-label=".form-select-sm example" id="unitSelect">
<option selected value="0">Empty</option>
<option value="1">ICU</option>
<option value="2">Med</option>
</select>
<!--some other content-->
</div>
</div>
<div class="card">
<div class="card-header" data-background-color="empty">
<select class="form-select form-select-sm" aria-label=".form-select-sm example" id="unitSelect">
<option selected value="0">Empty</option>
<option value="1">ICU</option>
<option value="2">Med</option>
</select>
<!--some other content-->
</div>
</div>
<div class="card">
<div class="card-header" data-background-color="empty">
<select class="form-select form-select-sm" aria-label=".form-select-sm example" id="unitSelect">
<option selected value="0">Empty</option>
<option value="1">ICU</option>
<option value="2">Med</option>
</select>
<!--some other content-->
</div>
</div>