使用jQuery/DOM为登录标签字母动态添加span实现波浪效果失败求助

问题根源 #

你的JavaScript代码存在两处关键错误，导致无法为标签字母动态添加span标签：

1. 原生JS：未正确引用当前label的文本内容（innerText需改为label.innerText），且map函数未返回生成的span字符串。
2. jQuery：错误使用赋值语句$(this).html = ...，应调用$(this).html()方法来设置内容。

此外，CSS中label未设置相对定位，导致span的绝对定位参考对象错误，需补充position: relative。

修正后的完整代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login wave effect</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="stylesheet.css">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
    <div class="container">
        <h1>Please Login</h1>
        <form>
            <div class="form-container">
                <input type="text" required>
                <label for="input">Email</label>
            </div>
            <div class="form-container">
                <input type="password" required>
                <label for="input">Password</label>
            </div>
            <button class="btn" type="submit">Login</button>
        </form>
        <p class="text">
            Don't have an account? <a href="#">Register</a>
        </p>
    </div>
    <!-- 选择其中一种JS方式即可 -->
    <script src="script.js"></script>
    <!-- <script>
        $(".form-container label").each(function(){
            $(this).html(
                $(this).text()
                .split("")
                .map(function(element,idx){
                    return `<span style="transition-delay:${idx*50}ms">${element}</span>`;
                })
                .join('')
            );
        });
    </script> -->
</body>
</html>

原生JavaScript代码（script.js）

var labels = document.querySelectorAll(".form-container label");
labels.forEach(function(label){
    label.innerHTML = label.innerText
        .split("")
        .map(function(element, idx){
            return `<span style="transition-delay:${idx*50}ms">${element}</span>`;
        })
        .join('');
});

jQuery代码（可直接嵌入HTML）

$(".form-container label").each(function(){
    $(this).html(
        $(this).text()
            .split("")
            .map(function(element, idx){
                return `<span style="transition-delay:${idx*50}ms">${element}</span>`;
            })
            .join('')
    );
});

CSS代码（stylesheet.css）

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
*{
    box-sizing: border-box;
}
body{
    font-family:'Muli', sans-serif;
    margin: 0;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    height: 100vh;
    overflow: hidden;
    background-color: lightblue;
}
.container{
    background-color: rgb(44, 88, 124);
    color: white;
    padding: 20px 50px;
    border: 0;
    border-radius: 10px;
    position: relative;
}
.btn{
    display: block;
    font-family: inherit;
    width: 100%;
    padding :10px;
    border: 0;
    border-radius: 5px;
    background-color: blueviolet;
    color: aliceblue;
    margin-bottom: 60px;
}
.btn:active{
    outline: 0;
    transform: scale(0.95);
    background-color: rgb(83, 20, 142);
}
h1{
    text-align: center;
    font-size: 60px;
    margin: 10px 0 30px;
}
.form-container{
    margin:20px 0px 40px;
    padding: 10px;
    width: 300px;
}
.form-container input{
    background-color: transparent;
    border: 0;
    border-bottom: 2px white solid;
    width: 100%;
    height: 30px;
    font-size: 20px;
    color: bisque;
}
.form-container input:focus,
.form-container input:valid{
    outline: 0;
}
.text{
    margin-top: 50px;
}
.text a{
    text-decoration: none;
    color: rgb(30, 3, 8);
}
.form-container label{
    width: 100%;
    height: 50px;
    position: relative; /* 新增：让span基于label定位 */
    display: block;
}
.form-container label span{
    position: absolute;
    top: 30px; /* 调整到输入框底部 */
    left: 10px; /* 对齐输入框内边距 */
    transition: transform 0.3s ease-in-out;
}
.form-container input:focus + label span,
.form-container input:valid + label span{
    transform: translateY(-30px); /* 调整上移距离，适配新定位 */
}

内容的提问来源于stack exchange，提问作者Ezz Deghedy