JS：下拉切换“类”答案

【问题标题】：JS: Dropdown toggle "class"JS：下拉切换“类”
【发布时间】：2014-01-16 21:27:49
【问题描述】：

我有一个小问题，需要你的帮助。我有一个带有选择选项 »green« 和 »blue« 的下拉菜单，我需要通过选择其中一个来切换一个类。

我的代码：

$(".btn_blue").click(function() {
$(".element").toggleClass("element_blue", 0);
});

$(".btn_green").click(function() {
$(".element").toggleClass("element_green", 0);
});

谁能看出我的错误在哪里？

克里斯

【问题讨论】：

标签： javascript jquery html css drop-down-menu

【解决方案1】：

http://jsfiddle.net/5DkVN/1/

 <select class="dropdown">
   <option class="btn_blue" data-class="element_blue">blue</option>
   <option class="btn_green"  data-class="element_green">green</option>
 </select>

 <div class="element">Text</div>




$(document).ready(function() {
   $('.dropdown').change(function(){
      $(".element").attr( "class", $(this).find('option:selected').data('class')+ " element");
  });        
});

【讨论】：

或更简洁：$(".element").attr('class', "element "+ this.value); 见：jsfiddle.net/QCPjx
为什么不简单地使用而不是 data-attributes...？ ;)
@sibbl 值可能用于其他目的。这就是为什么我更喜欢为此类任务使用数据属性。

【解决方案2】：

您必须使用下拉更改事件而不是单击任何选项。下面的代码可以帮助你理解

$(".dropdown").change(function(){
   if($(this).val() == 'blue')
      $(".element").toggleClass("blue");
   else if($(this).val() == 'green')
      $(".element").toggleClass("green");
});

【讨论】：

【解决方案3】：

除了添加 JQuery 之外，使用 change 事件处理程序在 dropbox 的选择发生更改时获得通知，然后获取下拉列表的值：

$(document).ready(function() {
    $(".dropdown").change(function() {
        var value = $(this).val();
        if(value == "blue") 
            $(".element").removeClass("element_green").addClass("element_blue");
        else if(value == "green")
            $(".element").removeClass("element_blue").addClass("element_green");
    });        
});

See this working fiddle of your demo.

【讨论】：

看起来很有前途！我将用我的复杂示例进行尝试，看看它是否有效......请等待;D