Question

我正在编写一个jquery插件来创建为我的应用程序设计的ajax调用。

在这个插件中，我的ajax调用看起来像这样（减少到问题所需）：

    $.ajax({
        url: route,
        type: "post",
        data: inputData,
        success: function(response, textStatus, jqXHR) {
            if (outputSelector !== undefined) {

                $(outputSelector).html(response);
                // or
                $(outputSelector).val(response);

            }
        }
    });

outputSelector是一个在插件外部定义的选择器。我不知道此选择器是<div>还是<input>还是<select>。有没有一种聪明的方法可以知道我是否需要使用val（）或html（）？

Answer 1

可能我们可以检查该元素是否具有value属性：

var el = $(outputSelector);
if (el[0].value !== undefined) {
    el.val(response);
} else {
    el.html(response);
}

因此，有点像一线通用解决方案可能是：

$(outputSelector).each(function() {
    this[this.value !== undefined ? "value" : "innerHTML"] = response;
});

Answer 2

如果outputSelector是类选择器，并且元素是混合类型，则需要使用.each。虽然将div和input与同一个类混合起来并不好，但如果要创建插件，则需要考虑这种情况。

$(outputSelector).each(function() {
    if ('value' in this) {
        $(this).val(response);
    } else {
        $(this).html(response);
    }
});

Answer 3

您可以使用.is(..)方法确定要使用的方法。

$.ajax({
    url: route,
    type: "post",
    data: inputData,
    success: function(response, textStatus, jqXHR) {
        if (outputSelector !== undefined) {
            var $output = $(outputSelector),
                method = $output.is('input,select,textarea') ? 'val' : 'html';

            $output[method](response);
        }
    }
});

Answer 4

您还可以使用.prop()方法来确定是否为给定的选择器定义了属性：

if ($(outputSelector).prop("value") !== undefined)
  $(outputSelector).val(response);
else
  $(outputSelector).html(response);

<强> EXAMPLE

或者你也可以.hasOwnProperty()

Answer 5

在您的成功函数中，输入：

if (outputSelector !== undefined) {
    if(outputSelector.is("input"))
    {
        outputSelector.val(response);
    } 
    else if (outputSelector.is("div"))
    {
        outputSelector.html(response);
    }
}

使用switch语句会有更好的语法，但是如果你假设只有输入用于val()，而其他所有内容都是html()，那么只需用最后的else if替换只需else并删除条件。

jQuery自动检测我是否需要使用.html（）或.val（）

5 个答案: