当输入框聚焦时 JavaScript 不运行。简单修复？

Question

我从以前的网站复制了这段代码，该网站运行得很好。然而，即使我复制了所有内容，由于某种原因它也不起作用。

我浏览了代码，但从未接触过任何东西，但也摆弄了一些我能想到的选项。到目前为止还没有任何效果。

https://jsfiddle.net/Lpbmg0z6/

HTML:

<section class="contact__section" id="contact">
    <h2 class="vh">Contact Me</h2>
    <div class="innerContent">
        <div class="contact__form clear all">
            <fieldset id="contact_form">                                            
                <div class="contactForm__full contactForm__input">
                    <label for="name" class="all">name</label>
                    <input type="text" name="name" id="name" />
                </div>
                <div class="contactForm__full contactForm__input">
                    <label for="email" class="all">email</label>
                    <input type="text" name="email" id="email" />
                </div>
                <div class="contactForm__full contactForm__input">
                    <label for="message" class="all">message</label>
                    <textarea name="message" id="message"></textarea>
                </div>
                <div class="contactForm__full">
                    <button class="submit_btn all" id="submit_btn" aria-label="Submit message">submit</button>
                </div>

                <div id="result" class="contactForm__results"></div>

            </fieldset>

        </div>
    </div>
</section>






JS:

$("input").focus(function () {
    $(this).parent().find("label").removeClass("labelBlur").addClass("labelFocus");
});
$("input").focusout(function () {
    if ($(this).val().length == 0) {
        $(this).parent().find("label").addClass("labelBlur").removeClass("labelFocus");
    }
});

var inputs = $("input").length;
for (var i = 0; i < inputs; i++) {
    $input = $("input:eq(" + i + ")");
    if (($input.attr("type") != "checkbox") && ($input.attr("type") != "submit")) {
        if ($input.val().length != 0) {
            $input.parent().find("label").addClass("labelFocus");
        } else {
            $input.parent().find("label").addClass("labelBlur");
        }
    }
}

$("textarea").focus(function () {
    $(this).parent().find("label").removeClass("labelBlur").addClass("labelFocus--textarea");
});
$("textarea").focusout(function () {
    if ($(this).val().length == 0) {
        $(this).parent().find("label").addClass("labelBlur").removeClass("labelFocus--textarea");
    }
});

var textareas = $("textarea").length;
for (var i = 0; i < textareas; i++) {
    $textarea = $("textarea:eq(" + i + ")");
    if (($textarea.attr("type") != "checkbox") && ($textarea.attr("type") != "submit")) {
        if ($textarea.val().length != 0) {
            $textarea.parent().find("label").addClass("labelFocus--textarea");
        } else {
            $textarea.parent().find("label").addClass("labelBlur");
        }
    }
}

它应该做的就是当您单击/聚焦其中一个输入时，它会添加一个类，当您松开焦点时，它会删除该类并添加回默认类。

Answer 1

在您的 JSFiddle 中，您忘记了包含 jQuery。一旦添加了 jQuery，代码就可以正常工作；您认为您在实际网站上也做了同样的事情吗？

要通过 CDN 添加 jQuery，请访问 https://code.jquery.com/并选择提供的脚本标签之一，例如

<script
          src="https://code.jquery.com/jquery-1.12.4.min.js"
          integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
          crossorigin="anonymous"></script>