Question

我遇到了一个令人抓狂的问题，我将变量设置为指向jQuery选择器，例如：var foobar=jQuery(this);然后我将此变量传递给要处理的函数。让我们简化一下，然后说这个函数看起来像这样：

function SetFieldValue (selector) {
  selector.val('test');
  console.log ( selector );
  console.log ( jQuery('#' + selector.attr('id')) );
}

在这种情况下，如果你认为：

选择器始终是表单元素（因此val（）是一个有效的操作）
选择器确实解析为具有“id”属性的单个dom元素

然后你会期望两个console.log语句输出相同的结果，对吧？好吧，我遇到的情况是这种情况只发生在大约90％的时间。

为了提供更多背景信息，我创建了一个简短的截屏视频来展示问题：

SCREENCAST LINK

供参考，这是截屏视频中显示的实际SetFieldValue代码：

function SetFieldValue ( domObject, value ) {
// as a safety function, check if a string representation of the domObject was passed in and convert it to a jQuery object if it was
if ( jQuery.type(domObject) === "string") {
    console.log ("Value passed into SetFieldValue was a string representation so converting to jQuery object");
    domObject = jQuery(domObject);
}

if ( jQuery.inArray (domObject.prop('tagName').toLowerCase(),['input' , 'select' , 'textarea']) >= 0 ) {
    console.log ("setting to value attribute: " + value);
    if ( domObject.hasAttr('id') ) {
        domObject.val(value);
        //jQuery('#' + domObject.attr('id')).val(value);
    } else {
        domObject.attr('value',value);          
    }

    console.log ("Using jQuery ID it is set to: " + jQuery('#' + domObject.attr('id')).val() );
    console.log ("Using jQuery selector variable it is set to: " + domObject.val() );
} else {
    console.log ("setting to html attribute");
    domObject.html( value );
}
return domObject;
}

Answer 1

让我们稍微检查一下代码。

首先分配回参数不是一个好习惯，在函数开头添加var会好很多，因为范围可能会丢失。

//Suggestion change parameter to domItem
var domObject

当参数不是String时，您缺少错误处理程序。在识别类型时使用

<VARNAME>.constructor.toString().match(/function (\w*)/)[1] === "<TYPE>"

效率更高，处理自定义类型。

不需要赋值属性的所有逻辑。任何dom对象都可以具有value属性。也不确定为什么要设置val与值。

domObject.attr('value',value);

在这一点上，我可以看到您的代码可以真正使用一些文档来帮助解释目的

如果您明确只想在输入字段上设置值并在非输入字段上将值设置为innerhtml，那么肯定需要逻辑但可以简化为......因为不需要检测到值覆盖。

if (jQuery.inArray (domObject.prop('tagName').toLowerCase(), ['input' , 'select' , 'textarea']) >= 0) {
    domObject.attr('value',value);
} else {
    domObject.html( value );
}

不知道为什么要退出domObject。

所以快速重写没有返回并保持大部分逻辑添加错误处理结果

/*jslint sloppy: true*/
/*global jQuery*/
function SetFieldValue(domString, value) {
    // as a safety function, check if a string representation of the domObjects was passed in and convert it to a jQuery object if it was
    var domObjects, index;
    //errorhandling
    if (domString === undefined || domString === null) {
        throw {error : "domString must have a value."};
    }
    if (domString.constructor.toString().match(/function (\w*)/)[1] !== "string") {
        if (domString.constructor.toString().match(/function (\w*)/)[1].match(/HTML[a-zA-Z]*Element/) === null) {
            throw {error : "domString expected to be String or domObjects"};
        }
    } else {
        if (jQuery(domString).length === 0) {
            throw {error : "domString does not resolve to a detectable domObjects."};
        }
    }
    //errorhandling

    //action
    if (domString.constructor.toString().match(/function (\w*)/)[1].match(/HTML[a-zA-Z]*Element/)) {
        //made as an array to normalize as jQuery returns an array allows code to be simplified
        domObjects = [domString];
    } else {
        domObjects = jQuery(domString);
    }

    //given that domObjects are an array need to step through the array
    for (index = domObjects.length - 1; index >= 0; index -= 1) {
        if (
            jQuery.inArray(
                domObjects[index].tagName.toLowerCase(),
                ['input', 'select', 'textarea']
            ) >= 0
        ) {
            if (domObjects[index].hasAttr('id')) {
                domObjects[index].val(value);
            } else {
                domObjects[index].attr('value', value);
            }
        } else {
            domObjects[index].html(value);
        }
    }
}

以上传递了JSLint

Answer 2

我知道我没有提供足够的背景让人们真正深入研究这个问题，但我最终解决了这个问题。问题是什么？好吧，首先问的是@Kobi是DOM元素的ID唯一...我高兴地报道了它。事实上它确实存在问题。耶稣。这一直是你忽视的明显事情，让你陷入困境。

无论如何，感谢您的耐心和帮助。

jQuery选择器和jQuery变量之间缺乏一致性？

2 个答案: