如果下拉列表中的选项具有特定的数据属性，则向div添加类

Question

我有一个类似的html

<div class="container">
<select class="product-select" id="product-selections">
<option data-option-1="M" data-option-2="cream" data-available="true" value="31979558568034">M / cream</option>
<option data-option-1="M" data-option-2="yellow" data-available="false" value="31979558568035">M / yellow</option>
<option data-option-1="M" data-option-2="red" data-available="true" value="31979558568036">M / red</option>
<option data-option-1="M" data-option-2="green" data-available="false" value="31979558568037">M / green</option>
<option data-option-1="M" data-option-2="blue" data-available="false" value="31979558568038">M / blue</option>
</select>
<div class="colors">
<span class="creme">Creme</span>
<span class="blue">Blue</span>
<span class="yellow">Yellow</span>
<span class="red">Red</span>
<span class="green">Green</span>
</div>
</div>

我想添加类"；不可用"；以跨越具有与下拉列表中选项元素中的data-option-2值匹配的类的元素，其中属性data-available=false。

例如：

<option data-option-1="M" data-option-2="yellow" data-available="false" 
value="31979558568034">M / yellow</option>

它具有可用的数据＝"0"；false"；数据选项-2＝"0"；黄色"；所以我想添加类"；不可用"；由于它具有与data-option-2的值匹配的类Yellow，因此数据可用=false。所以结果应该是这样的：

<div class="colors">
<span class="creme">Creme</span>
<span class="blue not-available">Blue</span>
<span class="yellow not-available">Yellow</span>
<span class="red">Red</span>
<span class="green not-available">Green</span>
</div>

谢谢你的帮助。我真的很感激。

Answer 1

$('#product-selections > option[data-available=false]').each(function(){
let dataOption2 = $(this).attr('data-option-2');
$('div.colors > span.' + dataOption2).addClass('not-available');
});

.not-available {
text-decoration: line-through;
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="container">
<select class="product-select" id="product-selections">
<option data-option-1="M" data-option-2="cream" data-available="true" value="31979558568034">M / cream</option>
<option data-option-1="M" data-option-2="yellow" data-available="false" value="31979558568035">M / yellow</option>
<option data-option-1="M" data-option-2="red" data-available="true" value="31979558568036">M / red</option>
<option data-option-1="M" data-option-2="green" data-available="false" value="31979558568037">M / green</option>
<option data-option-1="M" data-option-2="blue" data-available="false" value="31979558568038">M / blue</option>
</select>
<div class="colors">
<span class="creme">Creme</span>
<span class="blue">Blue</span>
<span class="yellow">Yellow</span>
<span class="red">Red</span>
<span class="green">Green</span>
</div>
</div>

Answer 2

为了开始一个快速提醒，因为Html本身并不是一种可以根据动作自动改变事情的交互式语言，因为它会自动暗示一个动作之后的行为。因为您在Html-by-css规则中实现的内容将被显示，而不会"添加"；也不是"；删除"；任何html属性到另一个元素，而不需要事件来触发它。我的意思是，你需要javascript或ajax来使工作更容易、更正确地完成。在实际应用程序中，可用的数据必须是来自数据库的信息，这是另一件需要考虑的事情。假设您必须通过在视图中设置数据来对其进行硬编码。然后，您将需要向Select元素添加一个事件侦听器，这样，一旦用户单击它来选择自己的选择，相应的信息就会添加到span元素中。让我们调用函数mySelecledItem((。您将在选择标签中看到这样的内容：

<select class="product-select" id="product-selections onSelect=mySelected()">

然后，您将在javascript文件中或直接在html文件的标记中定义javascript函数。您可能有：

<script>
function mySelected() {
const newSpan = document.querySelector('.blue');
newSpan.classList.add('not-available');
}
</script>

注意：

> document.querySelector('.blue')

将选择类"；蓝色"；和

> newSpan.classList.add('not-available')

将添加到该类"不可用"这是关于如何自动添加"；不可用"；去另一个班。您将需要javascript或Ajax。