jquery - 根据选择值将事件类添加到多个 div

Question

我已经为此设置了基本功能，但需要稍微修改它，我很困惑。我当前的代码根据选择下拉列表的值向一个 div 添加一个“事件”类。我需要做的是根据选择中的多个值将类 active 添加到多个 div。

现在，如果选择值等于“.recs”，则具有“recs”类的 div 在选择更改时会收到“active”类。我需要做的是:如果选择值有多个值，例如“.recs .green .rep”，则将类“active”添加到类为recs、green或rep的所有div中。

我当前的代码如下:

jQuery:

$("select[name='wayfinding-select']").change(function(){
  select_changed();
});

function select_changed(){
jQuery("a[class*='wayfinding-btn']").each(function(){
   jQuery(this).removeClass('active');
});
jQuery("select[name='wayfinding-select']").each(function(){
    var selected = jQuery(this).val();
    jQuery(selected).addClass('active');
    console.log(selected);
});
}

标记:

<select name="wayfinding-select" class="form-control form-group wayfinding-select">
<option value=".recs .green .rep">
    Add class active to all 3 divs
</option>
<option value=".recs">
    Add class active to RECs div only
</option>
<option value=".recs .green">
    Add class active to RECs and Green divs
</option>
</select>

<div class="wayfinding-btn recs">Renewable Energy Certificates</div>
<div class="wayfinding-btn green">Green Programs</div>
<div class="wayfinding-btn rep">Renewable Energy Procurement</div>

谢谢!

Answer 1

首先，使用所选值的类创建一个数组

var selected = $(this).val();
selected = selected.split(" ");

其次，将它们连接到以逗号分隔的字符串中，以获取以逗号分隔的字符串中的所有类。

selected = selected.join(',');

第三，使用字符串作为 jquery 选择器来添加类

$(selected).addClass("active"); //for example $(".recs,.green").addClass("active")