一段 jQuery 代码是否还有优化或改进其它实现方式的空间?

代码如下

/**--------------------
 * - 表单元素值自动选择
 * --------------------
 * @param name 表单元素name值
 * @param value 想要该表单元素自动选择的数据值
 * @author Talent 2016-11-22
 **/
function setInputSelected(name,value){
    var input = $("[name='" + name + "']");
    var inputFirst = input.first();

    if (inputFirst.is(":radio")) {
        input.filter("[value=" + value + "]").prop("checked", true);
    } else if (inputFirst.is(":checkbox")) {
        input.prop("checked", false);
        $(value).each(function() {
            input.filter("[value=" + this + "]").prop("checked", true);
        });
    } else {
        input.val(value);
    }
}

应用场景

一般多为PHP系统的信息修改页面,页面中的checkbox、radio、select,需要根据得到的当前数据的一些值来让他们自动选择上;如下图

图片描述

这个页面有N个select和一个radio,所以从数据库获取信息后调用上面的方法传值使他们自动选择;如下在页面底部一次传name调用。

<script type="text/javascript">
    setInputSelected("pid", "{$data.pid|default=0}");
    setInputSelected("is_menu", "{$data.is_menu|default=0}");
    setInputSelected("is_dev", "{$data.is_dev|default=0}");
    setInputSelected("status", "{$data.status|default=0}");
</script>

产生的问题:

  1. 页面中有多个元素需要自动选择的时候,有多少setInputSelected就要调用多少次,能否改进成一次调用,搞定所有呢;比如我传name和value的数组进去。

  2. 抛开问题1,上面的代码还有没有优化空间。

PS:感谢各位大神指教,最近在SF学到了好多东西。

阅读 2.8k
3 个回答
var data={
"pid":0,
"is_menu":0,
"is_dev":0,
"status":0,
}

$("input").each(function(){
    var name=$(this).attr("name");
    $(this).val(data[name]);
    if($(this).is(":radio") || $(this).is(":checkbox"))
    {
        $(this).attr("checked",true);
    }
});

直接 $(元素).val(数据)

如果你观察仔细,在上个问题里我给你的 jsfiddle 上的示例已经给了解决方案了……

https://jsfiddle.net/yoeray0d/2/

// 这里是三组数据,相当于3个测试用例,你实际情况应该是其中一个对象
var groups = [
    {
        sex: 1,
        language: [1, 2, 3],
        education: 2
    },
    {
        sex: 2,
        language: 2,
        education: 3
    },
    {
        sex: 3,
        language: [1, 2, 3, 4],
        education: 4
    }
];


// 这里的 index 主要是为了取用例数据,你可以直接传对象进来,里面也不用 groups[index] 了
function setValues(index) {
    const values = groups[index];
    Object.keys(values).forEach(name => {
        setInputSelected(name, values[name]);
    });
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题