bootstrap popover内容不变

时间:2015-05-08 21:38:27

标签: jquery html5 twitter-bootstrap popover

我想在同一输入字段上显示两个不同的消息,但两个popoff的内容消息是相同的,实际上它们应该是不同的。第一个弹出窗口是第一个字符是小写字母时,第二个弹出窗口是在达到5个字符时触发的。对于两个弹出窗口,我看到的唯一消息是小写。以下是我的代码:

JSFIDDLE

<input type="text" data-placement="bottom" data-trigger="manual" data-content="" name="momlastname" id="momlastname" ng-model="momlastname" maxlength="70" />

(function(){
      function firstCapital(e) {
                var inp = String.fromCharCode(e.which);
                if (/[A-Z]/.test(inp[0])) return true;
                else return false;
            };
    var message;
    $('#momlastname').keyup(function (f) {
                    //console.log($(this).val().length);
        switch ($(this).val().length) {
    case 1:
        message = "lower";
                break;
     case 5:
        message = "max reached";
                break;
        }


                    if ($(this).val().length == 1 && !firstCapital($(this).val())) {

                            $('#momlastname').popover({
                                trigger:'manual',
                                content:function(){
                                    return "lower letter";
                                }
                            });
                            $('#momlastname').popover('show');
                             $('#momlastname').addClass('error');

                    }
                  else if ($(this).val().length == 5) {
                            $('#momlastname').popover({
                                trigger:'manual',
                                content:function(){
                                    return message;
                                }
                            });
                            $('#momlastname').popover('show');
                            $('#momlastname').addClass('error');
                    }
                    else {
                        $('#momlastname').popover('hide');
                         $('#momlastname').removeClass('error');
                    }
                });
})();

1 个答案:

答案 0 :(得分:0)

你需要返回你的消息变量而不是像&#34; lower&#34;这样的字符串。有工作的例子。

jsfiddle.net/xksfj23e/10/