我有一个不同输入的表单,我有一些函数来改变输入值。
jQuery( document ).ready( function( $ ) {
jQuery('.cx-ui-container input[type="text"]').on('keyup', function(e){
slug_and_hide(jQuery(this));
})
jQuery('.cx-ui-container select').on('change', function(e){
handle_select_change(jQuery(this));
})
以下函数根据选择字段的值隐藏或显示文本区域字段:
function handle_select_change(obj) {
var selectField = jQuery(obj);
var selectedValue = selectField.val();
var textareaField = obj.parents('.cheryr-ui-repeater-content-box').find('textarea');
console.log(textareaField);
console.log(selectedValue);
if (selectedValue !== "multiple-choice") {
textareaField.css("display", "none");
} else {
textareaField.val("");
textareaField.css("display", "block");
}
}
以下函数根据上一个输入字段中输入的值创建slug:
function slug_and_hide(obj){
var inputField = jQuery(obj).val();
//Pass Label to lower case and replace spaces with dashes
let slug = inputField.toLowerCase().replace(/\s+/g, '-');
//Replace special characters except dashes and alphanumeric characters
slug = slug.replace(/[^a-z0-9-]/g, '');
//Remove leading and trailing dashes
slug = slug.replace(/^-+|-+$/g, '');
let inputSlug = jQuery(obj).parents('.cheryr-ui-repeater-content-box').find('.input-slug-wrap').find('input');
console.log(inputSlug, slug);
inputSlug.prop('readonly', true);
inputSlug.val(slug);
inputSlug.css("display", "block");
}
}
我有以下问题。我的两个功能都可以工作,但一开始不行。因此,select有3个选项:Stars
、Multiple-Choice
和Yes/No
。仅当select的值为Multiple-Choice
时,才应显示textarea字段。问题是,当页面第一次加载时,无论select的值是什么,都会显示textarea字段。并且在第一次改变值之后触发该函数。我如何使我的函数在页面第一次加载时被触发?
1条答案
按热度按时间6uxekuva1#
有几个选择。
一种是简单地将元素的选择器直接传递给jquery函数。
但文本区域可能仍然会根据页面加载情况短暂显示。
另一个选择是切换一个隐藏/显示元素的类,而不是使用javascript来更改显示。然后将该类添加到要隐藏的元素中。
.hide{display:none;}
textareaField.classList.toggle(“hide”)
和
inputSlug.classList.toggle(“hide”)