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

我想将 class“不可用”添加到具有 class 的跨度元素，该元素与属性 data-available=false 的下拉列表中选项元素中的 data-option-2 值相匹配。

例如：

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

它有 data-available="false" 和 data-option-2="yellow" 所以我想给 Yellow 添加 class "not-available" 因为它有 class黄色，与具有 data-available=false 的 data-option-2 的值相匹配。所以结果应该是这样的：

<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 中通过 css 规则实现的内容将被显示，并且不会“添加”或“删除”任何 html 属性到另一个没有事件触发它的元素.我的意思是你需要 javascript 或 ajax 来使工作更容易和正确地完成。在现实生活中的应用程序 data-available 必须是来自数据库的信息，这是另一个需要考虑的事情。假设您必须通过在视图中设置数据来对其进行硬编码。那么您需要向 Select 元素添加一个事件侦听器，以便当用户单击它以 select 他的选择时，相应的信息将被添加到 span 元素。让我们调用该函数 mySelecledItem()。您将在 select 标签中像这样：

 <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')

将selectclass“蓝色”和

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

将添加到 class 'not-available' 这是关于如何自动将“不可用”添加到另一个 class 的概述。您将需要 javascript 或 Ajax.

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

Add class to divs if options in dropdown has specific data attribute

html

javascript

jquery

jquery-ui