3 回答

TA貢獻1827條經驗 獲得超8個贊
這是使用 jQuery 的解決方案:
function checkForInputFooter(element) {
// element is passed to the function ^
const $label = $(element).siblings('.raven-field-label');
var $element = $(element);
if ($element.val().length > 0) {
$label.addClass('input-has-value');
$element.closest('form').addClass('input-has-value');
} else {
$label.removeClass('input-has-value');
$element.closest('form').removeClass('input-has-value');
}
}
// The lines below are executed on page load
$('input.raven-field').each(function() {
checkForInputFooter(this);
});
// The lines below (inside) are executed on change & keyup
$('input.raven-field').on('change keyup', function() {
checkForInputFooter(this);
});
我在這里更新了你的筆。

TA貢獻1815條經驗 獲得超13個贊
您可以收聽輸入元素的“輸入”事件并用于.closest(<selector>)添加或刪除類
$('input').on('input', function () {
if (!this.value) {
$(this).closest('form').removeClass('has-value');
} else {
$(this).closest('form').addClass('has-value');
}
})
編輯:https ://codepen.io/KlumperN/pen/xxVxdzy

TA貢獻1804條經驗 獲得超7個贊
在這里,使用 javascript vanilla。我選擇了標簽標簽和表單標簽,并根據元素值添加/刪除了類,但首先您應該將 id="myForm" 添加到您的表單 html 標簽中。祝你好運。
function checkForInputFooter(element) {
// element is passed to the function ^
let label = element.parentNode.querySelector('.raven-field-label');
let myForm = document.getElementById("myform");
let inputValue = element.value;
if(inputValue != "" && inputValue != null){
label.classList.add('input-has-value');
myForm.classList.add('input-has-value');
}
else{
label.classList.remove('input-has-value');
myForm.classList.remove('input-has-value');
}
}
添加回答
舉報