javascript - 一段 Jquery 代码，求大神优化补充。

问题描述

问 题

基本作用

页面中的 radio、checkbox、select，从数据库获取数据库后给这个方法传值，让相应的值自动 selected，最常用的就时select下拉框了；

需求

1. 大神帮忙优化如下代码（如有优化空间）；

2. （可选）还有我的部分页面还有一些 <li> 组成的导航，如果也能通过传值让<li> addclass('active')的话最好了，一个方法搞定。

/* ----------------
 * - 表单组件值自动选择
 * ----------------
 */
function setValue(name, value){
    var first = name.substr(0,1), input, i = 0, val;
    if(value === "") return;
    if("#" === first || "." === first){
        input = $(name);
    } else {
        input = $("[name='" + name + "']");
    }

    if(input.eq(0).is(":radio")) { //单选按钮
        input.filter("[value='" + value + "']").each(function(){this.checked = true});
    } else if(input.eq(0).is(":checkbox")) { //复选框
        if(!$.isArray(value)){
            val = new Array();
            val[0] = value;
        } else {
            val = value;
        }
        for(i = 0, len = val.length; i < len; i++){
            input.filter("[value='" + val[i] + "']").each(function(){this.checked = true});
        }
    } else {  //其他表单选项直接设置值
        input.val(value);
    }
}

解决方案

/* ----------------
 * - 表单组件值自动选择
 * ----------------
 */
function setValue(name, value) {
    // name.substr(0, 1) 可以用 name[0] 或者 name.charAt(0) 代替
    // 如果 name 为空字符串的时候 name[0] 是 undefined，name.charAt(0) 是 ""
    var first = name.substr(0, 1), input, i = 0, val;

    // [james] 如果有些值本来就存在空字符串，你这个作法就不太妥
    if (value === "") return;


    if ("#" === first || "." === first) {
        input = $(name);
    } else {
        input = $("[name='" + name + "']");
    }

    // input.eq(0) 可以用 input.first() 代替
    // 而且下面用了这么多次，可以用 var firstInput = input.first() 暂存一个变量
    if (input.eq(0).is(":radio")) { //单选按钮
        input.filter("[value='" + value + "']").each(function() { this.checked = true; });
    } else if (input.eq(0).is(":checkbox")) { //复选框
        // 这个 if 可以用一个三元运行解决 var = $.isArray(value) ? value : [ value ]
        if (!$.isArray(value)) {
            val = new Array();
            val[0] = value;
        } else {
            val = value;
        }

        for (i = 0, len = val.length; i < len; i++) {
            input.filter("[value='" + val[i] + "']").each(function() { this.checked = true; });
        }
    } else {  //其他表单选项直接设置值
        // select 也可以用这种方法设置值的，所以不用 care 这个问题
        input.val(value);
    }
}

this.checked = true 本身没有问题，但是用 $(this).prop("checked", true) 可能会好一些（到底好不好我也不确定）

另外，你只有设置 true 的情况，那么那些当前选中，给的值又没选中的怎么处理呢？

下面是综合你的代码进行的修改

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

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);
    }
}

这篇关于javascript - 一段 Jquery 代码，求大神优化补充。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！