Twitter Bootstrap 3通过自动刷新改变键盘上的弹出内容

Question

我正在尝试动态更改与输入字段类型密码关联的popover的内容 允许用户使用指南使用一些预定义的规则来创建他/她的密码，如下所示：

  

这个想法是当用户输入密码时触发了密钥Jquery事件并基于正则表达式表达式验证输入内容并动态更改 类对于每个规则，允许用户根据规则验证他的密码是否正确：

用户输入的通讯密码

问题是当用户键入并看到弹出框时，样式不会更新。要查看更新的指标，必须关注输入字段并悬停或再次单击该字段。

因此输入的keyup事件正常工作，以便在用户输入时记录并注册密码值，但不能更新相关popover的样式。

popover标记在下面描述为css样式表和

<div id="pswd_info">
     <h5>The pass must has:</h5>

    <ul class="no-list-style">
        <li id="letter" class="invalidy no-list-style">
           <strong>1 special char</strong>
        </li>
        <li id="capital" class="invalidy no-list-style">
           <strong>1 upper char</strong>
        </li>
        <li id="number" class="invalidy no-list-style">
           <strong>1 number</strong>
        </li>
        <li id="length" class="invalidy no-list-style">
           <strong>8 chars</strong>
        </li>
    </ul>
</div>

这是我正在使用的js代码：

var pswd = "";
    $('input[type=password]').popover({
      html : true,
      container: 'body',
      content: function() {
        return $('#pswd_info').html();
      }
    }).blur(function () {
        $(this).popover('hide');
    }).on('keyup', function () {
        pswd = $(this).val();
        console.log(pswd);
        //validate the length
        if ( pswd.length < 8 ) {
            $('#length').removeClass('validy').addClass('invalidy');
        } else {
            $('#length').removeClass('invalidy').addClass('validy');
        }

        // special char
        if ( pswd.match(/[!@#\$%\^\&*\)\(+=._-]/) ) {
          $('#letter').removeClass('invalidy').addClass('validy');
        } else {
          $('#letter').removeClass('validy').addClass('invalidy');
        }

        // capital letter
        if ( pswd.match(/^(?=.*[A-Z]).+$/) ) {
          $('#capital').removeClass('invalidy').addClass('validy');
        } else {
          $('#capital').removeClass('validy').addClass('invalidy');
        }

        // number
        if ( pswd.match(/\d/) ) {
          $('#number').removeClass('invalidy').addClass('validy');
        } else {
          $('#number').removeClass('validy').addClass('invalidy');
        }

    });

最后是css

#pswd_info {
    display:none;
}

ul.no-list-style li{
  padding: 1;
  list-style-type:none;
}

.invalidy {
    background:url(../img/cross.png) no-repeat 0 50%;
    padding: 20px;
    color:@error-color;
}

.validy {
    background:url(../img/tick.png) no-repeat 0 50%;
    padding: 20px;
    color:@heading-color;
}

我试图研究一些我做错了但不幸的是我还没找到。

Answer 1

问题

这里的一个问题是你使用ID来获取元素。所以我们在这里有这一行

content: function() {
   return $('#pswd_info').html();
}

这将基本上获取内部元素并将它们放在弹出div中。这也将重复ID，所以现在你在2个地方拥有相同的ID。

完成上述操作后，您正在使用此选择器

$('#length').removeClass('validy').addClass('invalidy');

这里的另一个问题是，由于你有2个具有相同ID的元素（这是无效的HTML），jQuery在这种情况下将选择它找到的第一个元素。第一个是.. #pswd_info 。现在jQuery更改了＆＃34; 错误的＆＃34;元素（通过查看浏览器元素检查器来测试）

如何解决

您必须将ID转换为类并使用类选择器（这也使其成为有效的HTML，因为不再有重复的ID）

$('.length').removeClass('validy').addClass('invalidy');

或者您可以使选择器更具体，因为在哪里可以找到ID（这将留下重复的内容）

$('.popover-content #length').removeClass('validy').addClass('invalidy');

在这里，我更改了长度和字母元素以查看其工作原理http://jsfiddle.net/6L7jnxon/