【问题标题】：jQuery select by two name roots and perform one of two function depending on which root was selectedjQuery 通过两个名称根选择并根据选择的根执行两个功能之一
【发布时间】：2012-09-27 15:19:48
【问题描述】：

我正在尝试让这段代码在 jQuery 中工作，并且我正在尝试确保对于每个根元素的每次迭代，相同迭代的替代根元素不包含任何内容。否则，它将 .val("") 属性设置为空字符串。尽可能使用搜索、查找或交换来寻找简单的解决方案。

每个匹配的数字都在同一行级别和相同的迭代次数上。

我有两种输入类型的输入文本元素，它们有两个不同的根名称，如下所示：

第一个根是“rootA”

第二个根是“rootB”

如果调用函数 fnRootA(); 调用任何 rootA，则启用模糊。如果调用任何 rootB 调用函数 fnRootB();.

再次，我试图确保对于像 1 这样的每次迭代，备用根不包含任何内容，否则它将 .val("") 属性设置为被模糊的根的空字符串。

我当前的代码适用于单个元素，但想使用 find 或 search 但不知道如何构造它..

$("input[name='rootA1']").blur(function(e) {
   fnRootA(1); // 这段代码只是删除了 rootA1 的值 val("")
              //如果rootB1里面有东西value属性
             // 括号中的 (1) 是迭代次数
});

【问题讨论】：

为什么不在输入中添加 rootA 和 rootB 类？它会让你的生活更轻松
请把它作为你的答案。
@hsalama 你可以这样做，但这根本没有必要，属性包含选择器很容易我会说:)

标签： jquery

【解决方案1】：

试试这个

^ 选择器选择所有以 name = root 开头的元素

$('input[name^=root]').on('blur', function(){

    if($(this).attr('name').indexOf('rootA') > -1){

       fnRootA();
    }
    else{
        fnRootB();
    }

});

【讨论】：

这应该可以；要获取号码，可以使用+this.name.match(/\d+/)[0]。

【解决方案2】：

你可以使用 jQuery 的attribute contains selector。它选择所有rootA/rootB 输入。

像这样：

$("input[name*='rootA']").blur(function(e) {
    //execute rootA function
});

$("input[name*='rootB']").blur(function(e) {
    //execute rootB function
});

（要获取输入的编号，您可以使用 string.replace 消除根前缀）

【讨论】：

我如何问这个问题来找到堆栈溢出或谷歌的答案？只是好奇使用什么术语。
可能类似于select input elements with common prefix。没什么特别的:)

【解决方案3】：

如果您在输入中添加一个类，例如在前三个中添加class = 'rootA'，在后三个中添加class='rootB'，您可以这样做

编辑：按照@pimvdb 的建议使用hasClass

$('input').on('blur', function(){
   if($(this).hasClass('rootA'))
    alert('rootA')
   else if($(this).hasClass('rootB'))
        alert('rootB')

})

观看直播fiddle

【讨论】：

请注意，这会检查精确的类匹配。 hasClass 可能更合适。
如果这两个输入具有相同的格式，例如货币格式，那么在 css 中将保持相同的格式但有两个不同的名称？
@RetroCoder 你能详细说明一下吗？输入的名称与您的选择无关，因为我正在获取所有输入然后检查它们的类。
@hsalama，我没有意识到您不必拥有一个定义了属性的实际 css 选择器类。您所需要的只是将类名添加到没有格式的元素中。很奇怪。
我现在唯一遇到的问题是确定索引。有什么建议吗？

【解决方案4】：

jsFiddle DEMO

在我看来，我们正在尝试查找匹配的 rootB# 输入，最简单的方法是获取我们正在获取的 rootA 的当前名称并获取以下 #，然后使用该数字调用函数并删除对应的 rootB# 值。

$('input[name^="rootA"]').blur(function(e) {
    var _name = $(this).attr('name');

    _name = _name.substr(5);
    fnRootA(_name); 

});

function fnRootA(num) {
    console.log(num);

    $('input[name="rootB' + num + '"]').val('');
}

【讨论】：

值得注意的是_name在这里是全局的，是字符串而不是数字。
这里没有什么不能在 IE8 中运行，这似乎是什么问题？
控制台未定义。它在一定程度上有效，但如果数字大于一位数，则无效。
哦，抱歉，删除了 console.log（适用于所有其他浏览器）它也适用于任何大小的数字，substr 从第 5 个字符开始到它有多大

【解决方案5】：

更新

嗯。你的解释有点宽泛，但我会尝试一下。

以下内容将抓取“rootA”的所有输入并告诉他们“嘿，模糊时让所有“rootB”元素变为 string.empty！”

$("input")
    .filter(function(e) {
        //  This should basically get a jQuery object made up of all input elements whose tag name contains "rootA"
        return $(this).attr("name").indexOf("rootA") != -1;
    })
    .blur(function(e) { //  of course the onblur function
        $("input")
            .filter(function(e) {
                //  This should basically get a jQuery object made up of all input elements whose tag name contains "rootB"
                return $(this).attr("name").indexOf("rootB") != -1;
            })
            .val("");   //  this would set their values to ""
    })

也可以写

$("input[name*='rootA']")
    .blur(function(e) {    //    of course the onblur function
        $("input[name*='rootB']")
            .val("");    //    this would set their values to ""
    })

但是如果您想更改与当前选择的输入不在同一根目录下的所有输入，您可以使用以下

$("input")
    .blur(function(e) {    //    of course the onblur function
        // Grab the root name without Number for purpose of knowing what inputs NOT to reset
        var rootName = $(this).attr("name").substring(0, 5);
        $("input")
            .filter(function(e) {
                //    This should basically get a jQuery object made up of all input elements whose tag name contains "rootB"
                return $(this).attr("name").indexOf(rootName) == -1;
            })
            .val("");    //    this would set ALL inputs not of current root name values to ""
    })

FULL WORKING EXAMPLE WITH RESET BUTTON HERE

【讨论】：