Question

我有一点问题，需要你的帮助。我有一个下拉选项 - 绿色«和»蓝色«我需要通过选择其中一个来切换一个类。

我的代码：

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

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

有人能看出我的错误吗？

克里斯

Answer 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");
  });        
});

Answer 2

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

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

Answer 3

除了添加JQuery之外，还可以使用更改事件处理程序在选择保管箱更改时收到通知，然后获取下拉列表的值：

$(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.

JS：下拉切换“类”

3 个答案: