如果下拉列表中的选项具有特定的数据属性，则将类添加到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>

我想在具有类的span元素中添加类"not-available“，这类元素与属性data-available=false匹配选项元素中的数据-选项-2值。

例如：

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

它有数据可用=“false”和数据-选项-2=“黄色”，所以我想在黄色中添加类"not-available“，因为它有与data-选项2的值匹配的类黄色--选项2具有数据-available=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本身并不是一种可以根据操作自动更改事物的交互式语言，因为它自动意味着一个动作之后的行为。因为您通过css规则在Html中实现的内容将被显示，并且不会“添加”或“删除”任何html属性到另一个元素，而不会发生触发它的事件。我的意思是，您需要javascript或ajax来使工作更简单和正确。在实际应用程序中，data-availlable必须是来自数据库的信息，这是另一件需要考虑的事情。假设您必须通过在视图中设置数据来对其进行硬编码。然后，您需要向Select添加一个事件侦听器，以便用户单击它来选择他的选择，然后将适当的信息添加到span元素中。让我们调用函数mySelecledItem()。您将在选择标记中这样做：

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

然后，您将在javascript文件中定义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。