刪除星號.... hasClass & removeClass JQuery 錯誤

Question

我想從密碼字段中刪除 class 星號，但我認為我有一個類型錯誤。 你能幫幫我嗎，我嘗試刪除屬性，但不幸的是這也不起作用，我不希望眼睛圖標和星號在一起，因為那不漂亮，我也希望它是必需的 下面是代碼 HTML， JS, CSS

 var passField = $('.password'); $('.show-pass').hover(function() { passField.attr('type', 'text'); }, function() { passField.attr('type', 'password'); }); // Add Asterisk on Required Field // else if($(this).hasClass('password').removeClass('asterisk')); $('input').each(function() { if($(this).attr('required') === 'required') { $(this).after('<span class="asterisk">*</span>'); } else if ($(this).hasClass('password')) { $(this).removeAttr('span.asterisk'); } });

 .show-pass { position: absolute; top: 20px; right: 15px; cursor: pointer; }.asterisk { font-size: 30px; position: absolute; right: 20px; top: 14px; color: #00704a; }.form-signin { width: 100%; max-width: 400px; padding: 15px; margin: auto; }.form-signin.checkbox { font-weight: 400; }.form-signin.form-floating:focus-within { z-index: 2; }.form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }.form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"> <form class="login mt-0" action="<?php echo $_SERVER['PHP_SELF']?>" method="POST"> <div class="form-floating"> <input type="username" name="username" class="form-control" placeholder="Benutzername zum Anmelden" required> <label>Benutzername</label> </div> <div class="form-floating password"> <input type="password" name="password" class="password form-control" placeholder="******" required> <label>Passwort</label> <i class="fas fa-eye show-pass"></i> </div> <div> <input type="submit" class="sbxBgPrimary w-100 btn btn-lg btn-primary" value="Anmelden"> </div>

Answer 1

在檢查要添加星號的輸入時，您可以排除密碼輸入：

$('input:not(.password)').each(

您也不需要循環，因為 jquery 將應用於集合中的所有元素，給出：

$('input[required]:not(.password)').after('<span class="asterisk">*</span>');

更新片段：

 var passField = $('.password'); $('.show-pass').hover(function() { passField.attr('type', 'text'); }, function() { passField.attr('type', 'password'); }); // Add Asterisk on Required Field $('input[required]:not(.password)').after('<span class="asterisk">*</span>');

 .show-pass { position: absolute; top: 20px; right: 15px; cursor: pointer; }.asterisk { font-size: 30px; position: absolute; right: 20px; top: 14px; color: #00704a; }.form-signin { width: 100%; max-width: 400px; padding: 15px; margin: auto; }.form-signin.checkbox { font-weight: 400; }.form-signin.form-floating:focus-within { z-index: 2; }.form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }.form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"> <form class="login mt-0" action="<?php echo $_SERVER['PHP_SELF']?>" method="POST"> <br/><br/> <div class="form-floating"> <input type="username" name="username" class="form-control" placeholder="Benutzername zum Anmelden" required> <label>Benutzername</label> </div> <div class="form-floating password"> <input type="password" name="password" class="password form-control" placeholder="******" required> <label>Passwort</label> <i class="fas fa-eye show-pass"></i> </div> <div> <input type="submit" class="sbxBgPrimary w-100 btn btn-lg btn-primary" value="Anmelden"> </div>