在更改功能菜单上显示3个不同的引导信息图标

时间:2016-02-22 13:51:23

标签: jquery twitter-bootstrap

我有一个奇怪的错误,我想要做的就是根据更改功能中选择的内容显示工具提示(每个工具提示信息也不同)。菜单只有3种可能的选择。 似乎显示/隐藏工具提示无法正常工作所以我使用了css opacity属性。这仅适用于一个而不适用于另一个。任何人都知道为什么在更改功能上这么复杂?以及如何使这项工作正常。我只是想为菜单的每个选项显示匹配的工具提示。



$('#menu1').change(function() {
                                                        if ($(this).val() == 'newhire') { // or this.value == '1'

                                                          
                                                            $("#iconNH").css({
                                                                opacity: 1.5
                                                            });
                                                            $("#iconUp").css({
                                                                opacity: 0.0
                                                            })
                                                           $("#iconNH").show();
                                                           $("#iconUp").hide();
                                                           

                                                        }
                                                        if ($(this).val() == 'upskill') { // or this.value == '2'

                                                          $("#iconNH").show();
                                                            $("#iconUp").css({
                                                                opacity: 1.5
                                                            });
                                                             $("#iconUp").hide();
                                                             $("#iconNH").css({
                                                                opacity: 0.0
                                                            });
                                                            

                                                        }
                                                        if ($(this).val() == 'both') { // or this.value == '3'
                                                           
                                                            $("#box5").show();
                                                            $("#iconNH").hide();

                                                        } else if ($(this).val() == '') {
                                                           
                                                            $("#iconNH").hide();
                                                             $("#iconUp").hide()
                                                        }
                                                    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="menu1">
                                                        <option id="Option1" value=""></option>
                                                        <option value="newhire">New Hire</option>
                                                        <option value="upskill">Upskill</option>
                                                        <option value="both">Both</option>
                                                    </select>
                                                    <a id="iconNH" style="margin-right:200px;" data-toggle="tooltip" title="New Hire audience availability"><span class="glyphicon glyphicon-info-sign"></span></a>

<a id="iconUp" style="margin-right:200px;" data-toggle="tooltip" title="New Hire audience availability"><span class="glyphicon glyphicon-info-sign"></span></a>
&#13;
&#13;
&#13;

0 个答案:

没有答案