可選類型的jQuery選擇器

Question

此jQuery選擇器嘗試匹配具有以下任何類型的input元素[text | number | email | tel] 它無法匹配元素。如何做呢？ THX

$('input[type="text"][type="number"][type="email"][type="tel"]') 

Answer 1

你需要有一個逗號分隔的選擇：

$('input[type="text"], input[type="number"], input[type="email"], input[type="tel"]') 

另一種選擇是：

$('input').filter('[type="text"],[type="number"],[type="email"],[type="tel"]') 

Answer 2

像這樣的東西：

$('input[type="text"], input[type="number"], input[type="email"], input[type="tel"]') 

https://api.jquery.com/multiple-selector/

Answer 3

輸入一次只能匹配一種類型。嘗試使用多個選擇器。

在下面的情況下，無論它發現第一個將被執行。

$('#btn').click(function(){ 
 

 
    console.log($('input[type="text"], input[type="number"], input[type="email"], input[type="tel"]').val()); 
 
    
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" /> 
 
<input type="number" /> 
 
<input type="email" /> 
 
<input type="tel" /> 
 
<button id="btn">Click</button>

如果你想獲得的所有值剛剛超過遍歷所有元素的選擇返回

$('#btn').click(function(){ 
 

 
    $('input[type="text"], input[type="number"], input[type="email"], input[type="tel"]').each(function() { 
 
    
 
    console.log($(this).val()); 
 
    }); 
 
    
 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" /> 
 
<input type="number" /> 
 
<input type="email" /> 
 
<input type="tel" /> 
 
<button id="btn">Click</button>