代码之家 › 专栏 › 技术社区 › ARr0w

jQuery选择器,由于值字符串中的某些字符而无法获取值

arrays jquery javascript

-1

ARr0w · 技术社区 · 7 年前

我有一组复选框,其中包含从1到5的值,然后是其他文本框,例如:

<input type="checkbox" class="CheckGroup" id="chk_1" value="1" />fortunate
<input type="checkbox" class="CheckGroup" id="chk_2" value="2" />Surprise
<input type="checkbox" class="CheckGroup" id="chk_3" value="3" />Whatever
<input type="checkbox" class="CheckGroup" id="chk_4" value="4" />OutofWords
<input type="checkbox" class="CheckGroup" id="chk_5" value="5" />Nevermind
<input type="checkbox" class="CheckGroup CheckGroupOther" id="chk_Other" value="Other" />Other<br>
<input type='text' id="txtOther" class="form-control" style="display: none;" require="please enter a value" />

用户选中了“其他”并保存了此值 "TESTINGfor123444((*&&^<>>??""::"

现在,当页面加载时,我有一个算法来设置值,当字符串值中没有这个部分时,它可以正常工作“<>gt;”

var indiArr = data.Indications.split('||');
        if (indiArr != "") {
            for (var i = 0; i < indiArr.length; i++) {
                var chk = $('input.CheckGroup[value="' + indiArr[i] + '"]');
                if (chk.length > 0) {
                    chk.prop('checked', true);
                }
                else if (!isnum(indiArr[i])) {
                    $('input.CheckGroupOther').prop('checked', true);
                    $('[id$=txtOther]').removeAttr('style').attr('validate', 'AddOrderAdditionalGroup').val(indiArr[i]);
                }
            }
        }

既然字符串的值是 “123444的测试((*&^<>>;??”::" 这个选择器 $('input.IndicationCheckGroup[value="' + indiArr[i] + '"]'); 返回“Text”对象,因为不存在具有此值的复选框,所以不应返回任何值,并按算法中的定义设置“Other”。

我还尝试了以下替代方案:

indiArr[i].toString()
JSON.stringify(indiArr[i])
"TESTINGfor123444((*&&^<>>??\"\"::" -添加了反斜杠以转义双引号,并尝试对导致此问题的字符使用反斜杠。

我还彻底研究了所有字符串的字符以及它开始返回的部分 text 对象在添加此部件后“ <>>

现在我已经用 if (chk.length > 0 && chk.is(':checkbox')) 我不认为威尔是恰当的和一般的,它是特定于这个场景的。但是,有没有一种通用的、恰当的方法来处理这种涵盖所有场景的问题呢?谢谢

0 回复 | 直到 7 年前

ARr0w 7 年前

当我在这里等待答案的时候,我也在寻找一个通用的解决方案来消除对象类型规范,例如: chk.is(':checkbox') 或 chk.is(':radio')

在安静的搜索之后,我能找到的最好的方法是通过添加正则表达式来检查特殊字符来删除对象类型检查并保持其通用性 ((*&&^<>>??"":: 从 TESTINGfor123444((*&&^<>>??""::

在加载和设置数据函数的范围内声明和实例化regex exp:

var rgx = new RegExp(/[!@#$%^&*(),.?":{}|<>]/g); //indentifies all the special characters

所有的复选框/单选组外观/消失和验证依赖 其他收音机/复选框

function SetField(dataArr, parentSelector, groupClassName) {
    if (dataArr != "") {
        for (var i = 0; i < dataArr.length; i++) {
            var field = $(parentSelector).find('input.' + groupClassName + '[value="' + dataArr[i] + '"]');
            if (!rgx.test(dataArr[i])) {
                if (field.length > 0) {
                    field.prop('checked', true);
                }
                else {
                    $(parentSelector).find('input[value=Other]').not('input[type=text]').prop('checked', true);
                    $(parentSelector).find('input[type=text]').removeAttr('style').attr('validate', 'AddOrderAdditionalGroup').val(dataArr[i]);
                }
            }
            else {
                $(parentSelector).find('input[value=Other]').not('input[type=text]').prop('checked', true);
                $(parentSelector).find('input[type=text]').removeAttr('style').attr('validate', 'AddOrderAdditionalGroup').val(dataArr[i]);
            }
        }
    }
}

根据上述函数,在html中添加了一点更改,即父级 div/fieldset 在里面有一个输入类。

<fieldset class="responseGroup">
<input type="checkbox" class="ResponseCheckGroup" id="chk_1" value="1" />fortunate
<input type="checkbox" class="ResponseCheckGroup" id="chk_2" value="2" />Surprise
<input type="checkbox" class="ResponseCheckGroup" id="chk_3" value="3" />Whatever
<input type="checkbox" class="ResponseCheckGroup" id="chk_4" value="4" />OutofWords
<input type="checkbox" class="ResponseCheckGroup" id="chk_5" value="5" />Nevermind
<input type="checkbox" class="ResponseCheckGroup ResponseCheckGroupOther" id="chk_Other" value="Other" />Other<br>
<input type='text' id="txtOther" class="form-control" style="display: none;" require="please enter a value" />
</fieldset>

最后像这样调用函数:

SetField(["1","4","5","TESTINGfor123444((*&&^<>>??\"\"::"],'.responseGroup','ResponseCheckGroup')

但是,如果您碰巧在check/radio组的值中有特殊字符,那么您可以从regex中删除这些字符,以便将它们包含在检查中。

已编辑 根据我目前所面临的不同情况:

function SetField(data, parentSelector, groupClassName) {
    if (data != null) {
        if (typeof data === "object") {
            if (data != "") {
                for (var i = 0; i < data.length; i++) {
                    var field = $(parentSelector).find('input.' + groupClassName + '[value="' + data[i] + '"]');
                    if (!rgx.test(data[i])) {
                        if (field.length > 0) {
                            field.prop('checked', true);
                        }
                        else {
                            $(parentSelector).find('input[value=Other]').not('input[type=text]').prop('checked', true);
                            $(parentSelector).find('input[type=text]').removeAttr('style').attr('validate', 'AddOrderAdditionalGroup').val(data[i]);
                        }
                    }
                    else {
                        $(parentSelector).find('input[value=Other]').not('input[type=text]').prop('checked', true);
                        $(parentSelector).find('input[type=text]').removeAttr('style').attr('validate', 'AddOrderAdditionalGroup').val(data[i]);
                    }
                }
            }
        }
        else if (typeof data === "boolean") {
            var field = $('input.' + groupClassName + '[value="' + data + '"]');
            if (field.length > 0) {
                field.prop('checked', true);
            }
        }
        else if (typeof data === "string") {
            if (data === "true" || data === "false") {
                var field = $('input.' + groupClassName + '[value="' + data + '"]');
                if (field.length > 0) {
                    field.prop('checked', true);
                }
            }
        }
    }
}