Question

我已经为此设置了基本功能，但需要稍微修改它，我感到难过。我目前的代码添加了一个“有效”的代码。根据选择下拉列表的值将类分为一个div。我需要做的是根据select中的多个值将活动类添加到多个div。

现在，如果选择的值等于＆＃39; .recs＆＃39;这个班级与班级＆＃39; recs＆＃39;接受课程“活跃”改变选择。我需要做的是：如果选择值有多个值，例如＆＃34; .recs .green .rep＆＃34;然后添加课程＆＃39; active＆＃39;所有具有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")

Answer 2

您应该可以使用拆分功能执行此操作。这将导致一个数组返回到选定的变量，然后您可以使用$ .each函数迭代所选数组中的任何值。

看起来像这样：

jQuery("select[name='wayfinding-select']").each(function() {
    var selected = jQuery(this).val().split(' ');
    $.each(selected, function(index, value) {
        jQuery(value).addClass('active');
    });
    console.log(selected);
});

另外，注意到负责重置类的代码部分是以锚而不是div为目标。我改变了这个，所以jsfiddle可以正常工作，但不确定你是否有计划在将来将你的div转换为锚点。

无论如何，这里有一个更新的小提琴

https://jsfiddle.net/sm1215/z75tom8v/

根据选择值将类激活添加到多个div

2 个答案: