可选类型的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>