javascript - .net JavaScript 缩小破坏了 jQuery 插件

Question

我有一个 jQuery 插件，当 JS 缩小关闭时可以正常工作。只要您打开它，尽管插件的特定部分不再起作用。

该插件：是一个密码强度指示器插件，它通过一些逻辑检查输入，然后根据用户输入满足的条件数量突出显示 1-5 个指示器块。

---

插件（为简洁起见，减去大部分逻辑）：

$(function () {
    (function ($) {
        $.fn.strongPassword = function () {
            var updatePasswordStrengthIndicator = function (indicators, $context) {
                console.log("indicators ", indicators); //prints out correct value
                console.log("$context ", $context); //prints out object reference

                for (var i = 0; i <= indicators; i++) {
                    //problem lies here then
                    $context.siblings(".strong-password").children('.strong-password-indicator:nth-child(' + (i + 1) + ')').removeClass('normal').removeClass('pass').addClass('pass');
                }
            }

            return this.each(function () {

                var $this = $(this);

                //code to insert HTML elements for password strength indicators
                $("<div class='strong-password'><div class='clear-fix'><div class='float-left'>Password Strength</div><div class='float-right strong-password-status'>Too Short</div></div><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span></div>")                     .insertAfter($this);

                $this.keyup(function () {
                    //create required variables

                    //logic to work out password strength

                    //call to update indicators
                    updatePasswordStrengthIndicator(blocksToLight, $(this));
                });
            });
        }
    }(jQuery));
});

---

问题区域： 问题在于函数“updatePasswordStrengthIndicator”。我从两个参数“indicators”中找出了值，呈现出块的数量，而“$context”呈现出 HTML 输入，这两个参数都是正确的。

打开缩小，updatePasswordStrengthIndicator 失败，即使参数正确也没有块亮起

这是缩小的输出：

$(function () {
    (function (n) {
        n.fn.strongPassword = function () {
            var t = function (n, t) {
                console.log('indicators ', n),
                console.log('$context ', t);
                for (var i = 0; i <= n; i++) 
                    t.siblings('.strong-password').children('.strong-password-indicator:nth-child(' + (i + 1) + ')').removeClass('normal').removeClass('pass').addClass('pass')
            };

            return this.each(function () {

                var r = n(this);

                //code to insert HTML elements for password strength indicators
                n('<div class=\'strong-password\'><div class=\'clear-fix\'><div class=\'float-left\'>Password Strength</div><div class=\'float-right strong-password-status\'>Too Short</div></div><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span></div>').insertAfter(r),

                r.keyup(function () {
                    //create required variables

                    //logic to work out password strength

                    //call to update indicators
                    t(h, n(this)),
                })
            })
        }
    }) (jQuery)
})

---

编辑注意 - 如果我将 updatePasswordStrengthIndicator、for 循环、子选择器从 nth-child 更改为 'eq'，它会在缩小时起作用。不知道为什么 nth-child 会是一个问题

编辑- 这是有效的代码

没有缩小

$(function () {
    (function ($) {
        $.fn.strongPassword = function () {
            var updatePasswordStrengthIndicator = function (indicators, $context) {
                console.log("indicators ", indicators); //prints out correct value
                console.log("$context ", $context; //prints out empty string which is incorrect

                for (var i = 0; i <= indicators; i++) {
                    $context.siblings(".strong-password").children('.strong-password-indicator:eq(' + i + ')').removeClass('normal').removeClass('pass').addClass('pass');
                }
            }

            return this.each(function () {

                var $this = $(this);

                //code to insert HTML elements for password strength indicators
                $("<div class='strong-password'><div class='clear-fix'><div class='float-left'>Password Strength</div><div class='float-right strong-password-status'>Too Short</div></div><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span><span class='strong-password-indicator normal'></span></div>")                     .insertAfter($this);

                $this.keyup(function () {
                    //create required variables

                    //logic to work out password strength

                    //call to update indicators
                    updatePasswordStrengthIndicator(blocksToLight, $(this));
                });
            });
        }
    }(jQuery));
});

缩小

$(function () {
    (function (n) {
        n.fn.strongPassword = function () {
            var t = function (n, t) {
                console.log('indicators ', n),
                console.log('$context ', t);
                for (var i = 0; i <= n; i++) 
                    t.siblings('.strong-password').children('.strong-password-indicator:eq(' + i + ')').removeClass('normal').removeClass('pass').addClass('pass')
            };

            return this.each(function () {

                var r = n(this);

                //code to insert HTML elements for password strength indicators
                n('<div class=\'strong-password\'><div class=\'clear-fix\'><div class=\'float-left\'>Password Strength</div><div class=\'float-right strong-password-status\'>Too Short</div></div><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span><span class=\'strong-password-indicator normal\'></span></div>').insertAfter(r),

                r.keyup(function () {
                    //create required variables

                    //logic to work out password strength

                    //call to update indicators
                    t(h, n(this)),
                })
            })
        }
    }) (jQuery)
})