识别特定 DOM 对象是否实际上是滑块对象
Identify if a particular DOM object is actually a slider object
我正在使用 JQuery slider，它工作得很好，但是对于一个特定的功能，我需要从一个特定的对象中找出一个滑块，如果是这样，我想执行一些特定的代码。
我的 HTML 表单中的滑块名为 mySlider。我希望能够做这样的事情：
if($("#mySlider").type() === "slider") {
alert("Yes, a slider it is");
}
else {
alert("No, this is not a slider :(");
}
我测试了 .type()、.is("slider")、.is("rangeslider")、.is("input:slider")、.role() 但是 [=其中 23=] 似乎满足了我的需求。
如果插件没有为此公开方法（遗憾的是很少见），通常的解决方案是寻找插件添加到元素的内容。在这种情况下，它看起来很像它添加了一个 ui-slider-input class。所以：
if ($("#mySlider").hasClass("ui-slider-input")) {
// Yes
} else {
// No
}
与@T.J 类似。群众回答：
if(typeof $('#mySlider').slider === "function"){
//YES
}
测试是否所有选定元素都是 jQuery 移动滑块
与 一样，最好的解决方案是 API 显式公开一种方法来进行此确定。遗憾的是，jQuery Mobile 并未公开针对滑块的特定检测方法。但是，他们确实公开了可用于该目的的方法。
虽然没有明确的意图，但 option() 方法可用于确定元素是否为 jQuery 移动滑块。如果元素是 jQuery 移动滑块，则它 returns 是一个对象。如果它不是 jQuery Mobile 滑块，或者 yet 不是 jQuery Mobile 滑块，它会抛出错误。
在下面的代码中，在声明了用于测试selector、isMobileSlider()的函数之后，会生成大量的控制台输出来验证[=17]之前的测试用例=] 准备就绪 $(document).ready().
function isMobileSlider(selector){
try{
var toReturn=false;
$(selector).each(function(){ //may have a collection
if($(this).is('input')){
//slider('option') can return an object for a random selector, so
// we must test that this is an <input>.
$(this).slider('option'); //Does not throw if implicitly iterated.
toReturn=true;
}else{
toReturn=false; //Instead, could just throw here, as we already catch
return false; //Exit each()
}
});
return toReturn;
}catch(e){
return false;
}
}
function logResults(when){
console.log('#mySlider is a jQuery Mobile slider' + when + ':'
+ isMobileSlider('#mySlider')); //true after ready
console.log('#slider-2 is a jQuery Mobile slider' + when + ':'
+ isMobileSlider('#slider-2')); //true after ready
console.log('#slider-3 is a jQuery Mobile slider' + when + ':'
+ isMobileSlider('#slider-3')); //false
console.log('All <input> are jQuery Mobile sliders' + when + ':'
+ isMobileSlider('input')); //false
console.log('All jQuery Mobile sliders' + when + ':'
+ isMobileSlider('#mySlider,#slider-2')); //true after ready
}
logResults(' (immediate)');
$( document ).ready(function(){
logResults(' (on ready)');
});
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<label for="mySlider">jQuery Mobile slider (mySlider):</label>
<input type="range" name="mySlider" id="mySlider" value="60" min="0" max="100" />
<label for="slider-2">jQuery Mobile slider (slider-2):</label>
<input type="range" name="slider-2" id="slider-2" value="60" min="0" max="100" />
<label for="slider-3">Non-jQuery Mobile slider (slider-3):</label>
<input data-role="none" type="range" name="slider-3" id="slider-3" value="60"
min="0" max="100" />
<!--Extra vertical space so the snippet can be scrolled to see the second slider-->
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
测试所有选定元素是否是或将是 jQuery 移动滑块
上面的方法，isMobileSlider()，returns 如果在 jQuery Mobile 运行ning 之前执行测试（即初始化滑块），则为 false。有时我们可能想测试 <input> 在 jQuery Mobile 执行时是否会变成 jQuery Mobile 滑块。为此，我们可以测试条件 used by the API (docs for current 1.4 version) 以确定 <input> 是否为 jQuery 移动滑块。具体来说，这是 <input type="range"> 而 <input> 没有属性 data-role="none"。注意：文档还指出 <label> 和 for 属性匹配 <input> 的 id 是必需的。但是，测试表明 jQuery Mobile 实际上并没有强制执行该要求（即 <input> 将是一个 jQuery Mobile 滑块，即使没有这样的 <label>）。
在这种情况下，此测试，willBeMobileSlider() 在下面的代码中，不能用于测试 jQuery Mobile 运行 之后的 <input> 因为相关<input> 的属性 type 更改为 type="number"。因此，为了涵盖 jQuery Mobile 运行ning 之前和 jQuery Mobile 运行 之后的测试，我们必须使用两种不同的测试。当然，这两个测试可以结合起来确定元素或选择器是否是或将是 jQuery 移动滑块。在下面的代码中，这是在 isWillBeMobileSlider().
中完成的
以下代码实现的测试将检测由 selector 表示的所有元素要么是 jQuery 移动滑块，要么一旦成为 jQuery 移动滑块 jQuery 手机运行秒。测试作为单独的功能实现，以防需要测试仅是或仅将是。与上面的代码一样，在定义了用于测试 selector 的函数之后，会生成大量控制台输出来验证 document 准备就绪之前和 $(document).ready() 之后的测试用例.
function willBeMobileSlider(selector){
//Relies on documented criteria for being a jQuery Mobile slider.
//Only valid _before_ jQuery Mobile has run.
//Prior to jQuery Mobile running, it will indicate that it will be a jQuery Mobile
// slider once that is run.
if($(selector).is('input[type="range"][data-role="none"]')){
return false;
}
return $(selector).is('input[type="range"]');
}
function isMobileSlider(selector){
try{
var toReturn=false;
$(selector).each(function(){ //may have a collection
if($(this).is('input')){
//slider('option') can return an object for a random selector, so
// we must test that this is an <input>.
$(this).slider('option'); //Does not throw if implicitly iterated.
toReturn=true;
}else{
toReturn=false; //Instead, could just throw here, as we already catch
return false; //Exit each()
}
});
return toReturn;
}catch(e){
return false;
}
}
function isWillBeMobileSlider(selector){
return (willBeMobileSlider(selector) || isMobileSlider(selector));
}
function logResults(when){
console.log('#mySlider will be a jQuery Mobile slider' + when + ':'
+ willBeMobileSlider('#mySlider')); //true before ready
console.log('#slider-2 will be a jQuery Mobile slider' + when + ':'
+ willBeMobileSlider('#slider-2')); //true before ready
console.log('#slider-3 will be a jQuery Mobile slider' + when + ':'
+ willBeMobileSlider('#slider-3')); //false
console.log('All <input> will be jQuery Mobile sliders' + when + ':'
+ willBeMobileSlider('input')); //false
console.log('All jQuery Mobile sliders will be' + when + ':'
+ willBeMobileSlider('#mySlider,#slider-2')); //true
console.log('#mySlider is a jQuery Mobile slider' + when + ':'
+ isMobileSlider('#mySlider')); //true after ready
console.log('#slider-2 is a jQuery Mobile slider' + when + ':'
+ isMobileSlider('#slider-2')); //true after ready
console.log('#slider-3 is a jQuery Mobile slider' + when + ':'
+ isMobileSlider('#slider-3')); //false
console.log('All <input> are jQuery Mobile sliders' + when + ':'
+ isMobileSlider('input')); //false
console.log('All jQuery Mobile sliders are' + when + ':'
+ isMobileSlider('#mySlider,#slider-2')); //true after ready
console.log('#mySlider is or will be a jQuery Mobile slider' + when + ':'
+ isWillBeMobileSlider('#mySlider')); //true
console.log('#slider-2 is or will be a jQuery Mobile slider' + when + ':'
+ isWillBeMobileSlider('#slider-2')); //true
console.log('#slider-3 is or will be a jQuery Mobile slider' + when + ':'
+ isWillBeMobileSlider('#slider-3')); //false
console.log('All <input> are or will be jQuery Mobile sliders' + when + ':'
+ isWillBeMobileSlider('input')); //false
console.log('All jQuery Mobile sliders are or will be' + when + ':'
+ isWillBeMobileSlider('#mySlider,#slider-2')); //true
}
logResults(' (immediate)');
$( document ).ready(function(){
logResults(' (on ready)');
});
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<label for="mySlider">jQuery Mobile slider (mySlider):</label>
<input type="range" name="mySlider" id="mySlider" value="60" min="0" max="100" />
<label for="slider-2">jQuery Mobile slider (slider-2):</label>
<input type="range" name="slider-2" id="slider-2" value="60" min="0" max="100" />
<label for="slider-3">Non-jQuery Mobile slider (slider-3):</label>
<input data-role="none" type="range" name="slider-3" id="slider-3" value="60"
min="0" max="100" />
<!--Extra vertical space so the snippet can be scrolled to see the second slider-->
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
注：class即是当前实现jQuery移动滑块的不错选择。除了对 DOM 的各种其他更改之外，还有其他几个 class 元素被添加到 <input> 元素中。可以使用这些更改中的任何一个。在这种情况下，class ui-slider-input 显得最具体。但是，它依赖于 jQuery 移动滑块的未记录的内部实现（即 class ui-slider-input 将继续应用）。
还应注意，当 <input> 不是 jQuery 移动滑块时，Option() 方法抛出错误也没有具体记录。
应该使用哪个测试，测试 class ui-slider-input 或 Option() 方法抛出错误，有待商榷。在我看来，测试抛出的错误要好一些。在初始化之前抛出错误的机制似乎是整个 jQuery Mobile 的选择，而不仅仅是滑块。然而，使用 class ui-slider-input 特定于 jQuery 移动滑块。因此，改变错误抛出行为是比改变 class 更大、更彻底的改变。因此，与要更改的元素上使用的 class 名称相比，更改错误行为的可能性更小。
我正在使用 JQuery slider，它工作得很好，但是对于一个特定的功能，我需要从一个特定的对象中找出一个滑块，如果是这样，我想执行一些特定的代码。
我的 HTML 表单中的滑块名为 mySlider。我希望能够做这样的事情：
if($("#mySlider").type() === "slider") {
alert("Yes, a slider it is");
}
else {
alert("No, this is not a slider :(");
}
我测试了 .type()、.is("slider")、.is("rangeslider")、.is("input:slider")、.role() 但是 [=其中 23=] 似乎满足了我的需求。
如果插件没有为此公开方法（遗憾的是很少见），通常的解决方案是寻找插件添加到元素的内容。在这种情况下，它看起来很像它添加了一个 ui-slider-input class。所以：
if ($("#mySlider").hasClass("ui-slider-input")) {
// Yes
} else {
// No
}
与@T.J 类似。群众回答：
if(typeof $('#mySlider').slider === "function"){
//YES
}
测试是否所有选定元素都是 jQuery 移动滑块
与
虽然没有明确的意图，但 option() 方法可用于确定元素是否为 jQuery 移动滑块。如果元素是 jQuery 移动滑块，则它 returns 是一个对象。如果它不是 jQuery Mobile 滑块，或者 yet 不是 jQuery Mobile 滑块，它会抛出错误。
在下面的代码中，在声明了用于测试selector、isMobileSlider()的函数之后，会生成大量的控制台输出来验证[=17]之前的测试用例=] 准备就绪 $(document).ready().
function isMobileSlider(selector){
try{
var toReturn=false;
$(selector).each(function(){ //may have a collection
if($(this).is('input')){
//slider('option') can return an object for a random selector, so
// we must test that this is an <input>.
$(this).slider('option'); //Does not throw if implicitly iterated.
toReturn=true;
}else{
toReturn=false; //Instead, could just throw here, as we already catch
return false; //Exit each()
}
});
return toReturn;
}catch(e){
return false;
}
}
function logResults(when){
console.log('#mySlider is a jQuery Mobile slider' + when + ':'
+ isMobileSlider('#mySlider')); //true after ready
console.log('#slider-2 is a jQuery Mobile slider' + when + ':'
+ isMobileSlider('#slider-2')); //true after ready
console.log('#slider-3 is a jQuery Mobile slider' + when + ':'
+ isMobileSlider('#slider-3')); //false
console.log('All <input> are jQuery Mobile sliders' + when + ':'
+ isMobileSlider('input')); //false
console.log('All jQuery Mobile sliders' + when + ':'
+ isMobileSlider('#mySlider,#slider-2')); //true after ready
}
logResults(' (immediate)');
$( document ).ready(function(){
logResults(' (on ready)');
});
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<label for="mySlider">jQuery Mobile slider (mySlider):</label>
<input type="range" name="mySlider" id="mySlider" value="60" min="0" max="100" />
<label for="slider-2">jQuery Mobile slider (slider-2):</label>
<input type="range" name="slider-2" id="slider-2" value="60" min="0" max="100" />
<label for="slider-3">Non-jQuery Mobile slider (slider-3):</label>
<input data-role="none" type="range" name="slider-3" id="slider-3" value="60"
min="0" max="100" />
<!--Extra vertical space so the snippet can be scrolled to see the second slider-->
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
测试所有选定元素是否是或将是 jQuery 移动滑块
上面的方法，isMobileSlider()，returns 如果在 jQuery Mobile 运行ning 之前执行测试（即初始化滑块），则为 false。有时我们可能想测试 <input> 在 jQuery Mobile 执行时是否会变成 jQuery Mobile 滑块。为此，我们可以测试条件 used by the API (docs for current 1.4 version) 以确定 <input> 是否为 jQuery 移动滑块。具体来说，这是 <input type="range"> 而 <input> 没有属性 data-role="none"。注意：文档还指出 <label> 和 for 属性匹配 <input> 的 id 是必需的。但是，测试表明 jQuery Mobile 实际上并没有强制执行该要求（即 <input> 将是一个 jQuery Mobile 滑块，即使没有这样的 <label>）。
在这种情况下，此测试，willBeMobileSlider() 在下面的代码中，不能用于测试 jQuery Mobile 运行 之后的 <input> 因为相关<input> 的属性 type 更改为 type="number"。因此，为了涵盖 jQuery Mobile 运行ning 之前和 jQuery Mobile 运行 之后的测试，我们必须使用两种不同的测试。当然，这两个测试可以结合起来确定元素或选择器是否是或将是 jQuery 移动滑块。在下面的代码中，这是在 isWillBeMobileSlider().
以下代码实现的测试将检测由 selector 表示的所有元素要么是 jQuery 移动滑块，要么一旦成为 jQuery 移动滑块 jQuery 手机运行秒。测试作为单独的功能实现，以防需要测试仅是或仅将是。与上面的代码一样，在定义了用于测试 selector 的函数之后，会生成大量控制台输出来验证 document 准备就绪之前和 $(document).ready() 之后的测试用例.
function willBeMobileSlider(selector){
//Relies on documented criteria for being a jQuery Mobile slider.
//Only valid _before_ jQuery Mobile has run.
//Prior to jQuery Mobile running, it will indicate that it will be a jQuery Mobile
// slider once that is run.
if($(selector).is('input[type="range"][data-role="none"]')){
return false;
}
return $(selector).is('input[type="range"]');
}
function isMobileSlider(selector){
try{
var toReturn=false;
$(selector).each(function(){ //may have a collection
if($(this).is('input')){
//slider('option') can return an object for a random selector, so
// we must test that this is an <input>.
$(this).slider('option'); //Does not throw if implicitly iterated.
toReturn=true;
}else{
toReturn=false; //Instead, could just throw here, as we already catch
return false; //Exit each()
}
});
return toReturn;
}catch(e){
return false;
}
}
function isWillBeMobileSlider(selector){
return (willBeMobileSlider(selector) || isMobileSlider(selector));
}
function logResults(when){
console.log('#mySlider will be a jQuery Mobile slider' + when + ':'
+ willBeMobileSlider('#mySlider')); //true before ready
console.log('#slider-2 will be a jQuery Mobile slider' + when + ':'
+ willBeMobileSlider('#slider-2')); //true before ready
console.log('#slider-3 will be a jQuery Mobile slider' + when + ':'
+ willBeMobileSlider('#slider-3')); //false
console.log('All <input> will be jQuery Mobile sliders' + when + ':'
+ willBeMobileSlider('input')); //false
console.log('All jQuery Mobile sliders will be' + when + ':'
+ willBeMobileSlider('#mySlider,#slider-2')); //true
console.log('#mySlider is a jQuery Mobile slider' + when + ':'
+ isMobileSlider('#mySlider')); //true after ready
console.log('#slider-2 is a jQuery Mobile slider' + when + ':'
+ isMobileSlider('#slider-2')); //true after ready
console.log('#slider-3 is a jQuery Mobile slider' + when + ':'
+ isMobileSlider('#slider-3')); //false
console.log('All <input> are jQuery Mobile sliders' + when + ':'
+ isMobileSlider('input')); //false
console.log('All jQuery Mobile sliders are' + when + ':'
+ isMobileSlider('#mySlider,#slider-2')); //true after ready
console.log('#mySlider is or will be a jQuery Mobile slider' + when + ':'
+ isWillBeMobileSlider('#mySlider')); //true
console.log('#slider-2 is or will be a jQuery Mobile slider' + when + ':'
+ isWillBeMobileSlider('#slider-2')); //true
console.log('#slider-3 is or will be a jQuery Mobile slider' + when + ':'
+ isWillBeMobileSlider('#slider-3')); //false
console.log('All <input> are or will be jQuery Mobile sliders' + when + ':'
+ isWillBeMobileSlider('input')); //false
console.log('All jQuery Mobile sliders are or will be' + when + ':'
+ isWillBeMobileSlider('#mySlider,#slider-2')); //true
}
logResults(' (immediate)');
$( document ).ready(function(){
logResults(' (on ready)');
});
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<label for="mySlider">jQuery Mobile slider (mySlider):</label>
<input type="range" name="mySlider" id="mySlider" value="60" min="0" max="100" />
<label for="slider-2">jQuery Mobile slider (slider-2):</label>
<input type="range" name="slider-2" id="slider-2" value="60" min="0" max="100" />
<label for="slider-3">Non-jQuery Mobile slider (slider-3):</label>
<input data-role="none" type="range" name="slider-3" id="slider-3" value="60"
min="0" max="100" />
<!--Extra vertical space so the snippet can be scrolled to see the second slider-->
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
注：class即<input> 元素中。可以使用这些更改中的任何一个。在这种情况下，class ui-slider-input 显得最具体。但是，它依赖于 jQuery 移动滑块的未记录的内部实现（即 class ui-slider-input 将继续应用）。
还应注意，当 <input> 不是 jQuery 移动滑块时，Option() 方法抛出错误也没有具体记录。
应该使用哪个测试，测试 class ui-slider-input 或 Option() 方法抛出错误，有待商榷。在我看来，测试抛出的错误要好一些。在初始化之前抛出错误的机制似乎是整个 jQuery Mobile 的选择，而不仅仅是滑块。然而，使用 class ui-slider-input 特定于 jQuery 移动滑块。因此，改变错误抛出行为是比改变 class 更大、更彻底的改变。因此，与要更改的元素上使用的 class 名称相比，更改错误行为的可能性更小。