Question

这是关于如何处理这种情况的更多问题。

我有一个表单，如果任何表单输入包含“.ca”，“canada”或“canadian”，我需要执行操作，但是我还需要撤消该操作字段不包含这些字符串。理想情况下，这将会在表单完成时触发（如果需要），而不是在单击提交时触发。

我的代码检查“.ca”，“加拿大”或“加拿大”

var optInFieldIsVisible = false;
var optInField = jQuery( 'input[name*="email"]' );

jQuery("*").find('input').bind('input propertychange', function() {
    if (/.ca$|canada|canadian/i.test( jQuery(this).val() ) ) {
        optInFieldIsVisible = true;
        optInField.closest( '.formField' ).show();
            // show special form field because reference to canada is present
    }
    else {
        if (optInFieldIsVisible == false) {
            optInField.closest( '.formField' ).hide();
            // hide special form field because reference to canada is removed
    }
 });

上述代码的问题在于，它没有任何条件对特殊字段有效，一旦激活它就永远不会重新隐藏。

如果我删除了else条件下的“if（optInFieldIsVisible == false）”，如果用户在当前选择的输入中工作，该字段将正确显示和隐藏，但是只要有任何内容，它就会重新隐藏键入下一个输入（因为正则表达式在现在选择的新表单输入中返回false）。

显然，标志变量不是解决方案，而某种计数器变量我也看不到在这里起作用。有人有指针吗？

编辑：查看实时演示http://jsbin.com/toyin/1/edit

Answer 1

我不确定我是否理解正确，但这可能是你想要的：

var optInFieldIsVisible = false;
var optInField = jQuery( 'input[name*="email"]' );

jQuery("*").find('input').bind('input propertychange', function() {
    if (/.ca$|canada|canadian/i.test( jQuery(this).val() && !optInFieldIsVisible ) ) {
        optInFieldIsVisible = true;
        optInField.closest( '.formField' ).show();
            // show special form field because reference to canada is present
    }
    else if (optInFieldIsVisible){
            optInFieldIsVisible = false;
            optInField.closest( '.formField' ).hide();
            // hide special form field because reference to canada is removed
    }
 });

Answer 2

结帐fiddle，这是你想做的事情吗？

var optInFieldIsVisible = false;
var optInField = jQuery( 'input[name*="opt-in"]' );
optInField.closest( 'div.formField' ).hide();

jQuery("*").find('input').bind('input propertychange', function() {
    if (/.ca$|canada|canadian/i.test( jQuery(this).val() ) ) {
        optInFieldIsVisible = true;
        optInField.closest( 'div.formField' ).show();
    }
    else {
        optInFieldIsVisible = false;
        optInField.closest( 'div.formField' ).hide();
    }
 });

Answer 3

这就是我想出来解决这个问题的方法。添加了新功能：

/* clear required field on focusout if triggers are removed from all fields */
jQuery("*").find('input').focusout(function(){
    var eList = []; 
    jQuery("*").find('input').each( function() { 
        if ( /.ca$|canada|canadian/i.test( jQuery(this).val() ) == false ) {
            eList.push(false);
            }
        else {
            eList.push(true);
        }
    })
    if ( jQuery.inArray(true, eList )==-1 ) {
        optInField.closest( '.formField' ).hide();
    }
})

还从原始代码中删除了else语句，因为上面添加的语句不再需要。见http://jsbin.com/toyin/3/edit

如果所有表单输入都不包含特定值，则不确定如何执行操作

3 个答案: