Javascript没有运行或工作？

Question

我有一个项目,其中包含一个带密码计的登录表单.我按照cssdeck的教程,然后尝试将代码复制粘贴到JSFiddle中以查看结果.它适用于演示,但不适用于我的JSFiddle.问题是密码计无法正常工作.我已阅读过JavaScript,但看不出有什么问题.
任何建议都会很好.为什么完全相同的代码在小提琴中不起作用？

$(function(){
    var pass1 = $('#password1'),
        pass2 = $('#password2'),
        email = $('#email'),
        form = $('#main form'),
        arrow = $('#main .arrow');

    // Empty the fields on load
    $('#main .row input').val('');

    // Handle form submissions
    form.on('submit', function(e){
        // Is everything entered correctly?
        if ($('#main .row.success').length == $('#main .row').length) {
            // Yes!
            alert("Thank you for trying out this demo!");
            e.preventDefault();
            // Remove this to allow actual submission
        } else {
            // No. Prevent form submission
            e.preventDefault();
        }
    });

    // Validate the email field
    email.on('blur', function(){
        // Very simple validation
        if (!/^\S+@\S+\.\S+$/.test(email.val())) {
            email.parent().addClass('error').removeClass('success');
        } else {
            email.parent().removeClass('error').addClass('success');
        }
    });

    // Use the complexify plugin on the first password field
    pass1.complexify({minimumChars: 6, strengthScaleFactor: 0.7},
        function(valid, complexity){
            if (valid) {
                pass2.removeAttr('disabled');
                pass1.parent().removeClass('error').addClass('success');
            } else {
                pass2.attr('disabled','true');
                pass1.parent().removeClass('success').addClass('error');
            }

            var calculated = (complexity / 100) * 268 - 134;
            var prop = 'rotate(' + (calculated) + 'deg)';
            // Rotate the arrow
            arrow.css({
                '-moz-transform': prop,
                '-webkit-transform': prop,
                '-o-transform': prop,
                '-ms-transform': prop,
                'transform': prop
            });
        }
    );

    // Validate the second password field
    pass2.on('keydown input', function(){
        // Make sure its value equals the first's
        if (pass2.val() == pass1.val()) {
            pass2.parent().removeClass('error').addClass('success');
        } else {
            pass2.parent().removeClass('success').addClass('error');
        }
    });
});

该jquery.complexify插件也包括在内.

Answer 1

您没有在代码中包含jQuery库.

这是你的小提琴

你需要在小提琴中包含这样的jQuery

添加jQuery https://jsfiddle.net/5n90vLgn/后,这是相同代码的小提琴

在您的页面中,您需要在编写js代码或包含外部js文件之前包含它,以包含来自CDN ^(*)的 jquery ,即

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

或包括jQuery的本地副本,如:

<script src="path/to/jquery.js/"></script>

^(*)上面的CDN来自jQuery网站,有jquery的其他CDN,虽然像谷歌图书馆或CDNjs图书馆