jQuery通過兩個名稱根選擇，並執行兩個函數之一，具體取決於選擇哪個根

Question

我試圖讓這個代碼在jQuery中工作，我試圖確保每個根元素的每次迭代，其同一迭代的備用根元素不包含任何內容。否則，它將.val（「」）屬性設置爲空字符串。如果可能的話，尋找一個簡單的解決方案，使用搜索，查找或交換。

每個匹配號碼在同一行級別和相同的迭代計數。

我有兩個輸入類型的輸入文本元素的兩個不同的根的名字，像這樣：

1根是 「rootA」

 
    <input type="text" name="rootA1" /> 
    <input type="text" name="rootA2 /> 
    <input type="text" name="rootA3" /> 

第二根是 「 rootB」

 
    <input type="text" name="rootB1" /> 
    <input type="text" name="rootB2 /> 
    <input type="text" name="rootB3" /> 

在模糊時，如果任何一個rootA被稱爲調用函數fnRootA（）;. 模糊，如果任何一個rootB被稱爲調用函數fnRootB（）;.

再次，我試圖確保每次迭代都像1那樣，備用根不包含任何東西，否則它將.val（「」）屬性設置爲模糊根的空字符串。

我當前的代碼適用於一個單一的元素，但想用查找或搜索，但不知道如何構建它..

$("input[name='rootA1']").blur(function(e) { 
    fnRootA(1); // this code just removes rootA1's value val("") 
       //if rootB1 has something in it value property 
      // the (1) in parenthesis is the iteration number 
}); 

Answer 1

試試這個

的^選擇器選擇的所有元素該開始的名稱=根

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

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

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

})​;​ 

Answer 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消除根本前綴的輸入數量）

Answer 3

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(''); 
} 
​ 

Answer 4

UPDATE

嗯。在你的解釋中有一點寬泛，但我會對它進行刺探。

下會搶的「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 "" 
    }) 

無論其如果你想改變所有輸入不在同一個根目錄作爲輸入目前選擇你coul d。使用以下

$("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

Answer 5

如果你喜歡class = 'rootA'添加一個類你輸入的前3 class='rootB'其他三個，你可以做到這一點

編輯：使用hasClass正如@pimvdb所建議的那樣

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

}）

查看即時fiddle