取值选择jQuery来更改CSS类

我有我的一个模式选择选项，如下图所示：取值选择jQuery来更改CSS类

<div class="modal-body"> 
    <select class="style" name="style" form="styleform"> 
    <option value="Sky">Sky</option> 
    <option value="Boulder">Boulder</option> 
    <option value="Paper">Paper</option> 
    <option value="Forest">Forest</option></option> 
    </select> 
</div>

每个中选择的选项应与在CSS样式。即style1，style2，style3和style4。

我试过这段代码将样式添加到我的面板，但它似乎并没有工作。

if($(".style").val()=="sky"){ 
    $('.panel').addClass("style1"); 
}

我也尝试删除面板的现有/默认类，但也没有工作。

来源

2016-02-16 anyabythestars

也许'$（“。style”）.val（）==“sky”'应该是'$（“.style”）.val（）==“Sky”或'$（“。style”）。val（）。toLowerCase（）==“sky”' – kosmos

oopps对不起，很简单，不是吗？：3谢谢 – anyabythestars

你是不是你的代码绑定到任何事件，因此该代码将不会被执行：

$(document).ready(function(){ 
    $('.style').change(function(){ 
     if($(this).val()=="Sky"){ 
      $('.panel').addClass("style1"); 
     } 
    }); 
});

文档.ready是要等到DOM准备好和.change是听改变用户选项

请注意，你的代码是区分大小写，因此在原始代码的，如果将永远不会计算为真，因为“天空”是从“天空”不同

来源

2016-02-16 08:48:58

事实证明，这是这是阻碍模态该在jQuery的过程...

我所做的只是把html的选择模式出来，并将其放置到面板标题

<div class="panel-heading">To do List     
    <select class="pull-right" id="style" name="style"> 
    <option value="Sky">Sky</option> 
    <option value="Boulder">Boulder</option> 
    <option value="Paper">Paper</option> 
    <option value="Forest">Forest</option> 
    </select> 
</div>

然后我在jQuery的

$('select').on('change', function() { 
    if($("#style option:selected").text()=="Sky"){ 
    $('.panel').removeClass("style2"); 
    $('.panel').removeClass("style3"); 
    $('.panel').removeClass("style4"); 
    $('.panel').addClass("style1"); 
    } 
})

使用此代码

等等来改变风格

来源

2016-02-17 02:14:02 anyabythestars

取值选择jQuery来更改CSS类

回答

相关问题