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

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

现在，如果选择值等于'.recs'，则类'recs'的div在选择更改时接收类'active'。我需要做的是：如果选择值具有多个值，例如“.recs .green .rep”，则将class'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>

谢谢！

来源

2016-03-22 kennycrippen

你的意思是这样的：https://jsfiddle.net/2a6o06wh/？ –

首先创建与所选值

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

第二类的数组，你在用逗号分隔获得与逗号分隔字符串中的所有类的字符串加入他们的行列。

selected = selected.join(',');

第三，您使用字符串作为jQuery选择要添加的类别

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

来源

2016-03-22 17:16:41 Castillo

好啊，你的解决方案似乎需要更少的工作。 @Jose，如果没有提供参数，连接函数不会自动使用逗号分隔值吗？ – sm1215

@ sm1215是的。我拒绝了编辑，但卡斯蒂略批准了它。我觉得新来的人更容易理解。我也不知道所有浏览器的行为是否相同，默认情况下使用逗号。 –

根据http://www.w3schools.com/jsref/jsref_join.asp，如果他的分隔符被省略，元素用逗号分隔 – Castillo

你应该能够做到这一点使用分割功能。这将导致一个数组返回到所选变量，然后您可以使用$ .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/

来源

2016-03-22 17:21:38 sm1215

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

回答

相关问题