确定特定DOM对象是否实际上是滑块对象
Identify if a particular DOM object is actually a slider object
我使用的是JQuery滑块，它工作得很好，但对于特定的函数，我需要从特定的对象中找出一个滑块，如果是的话，我想执行一些特定的代码。
我的HTML表单中的滑块名为mySlider。我希望能够做这样的事情：
if($("#mySlider").type() === "slider") {
alert("Yes, a slider it is");
}
else {
alert("No, this is not a slider :(");
}
我测试了.type（）、.is（"滑块"）、.I斯（"rangeslider"）、.is（"input:滑块"）和.role（），但它们似乎都不能满足我的需要。
如果插件没有为此公开方法（这很罕见），通常的解决方案是寻找插件添加到元素中的东西。在这种情况下，它看起来很像添加了一个ui-slider-input类。因此：
if ($("#mySlider").hasClass("ui-slider-input")) {
// Yes
} else {
// No
}
测试是否所有选定的元素都是jQuery Mobile滑块
正如T.J.Crowder所提到的，对于API来说，最好的解决方案是显式地公开一种方法来进行这种确定。不幸的是，jQueryMobile没有公开滑块的特定检测方法。然而，它们确实公开了一个可以用于此目的的方法。
虽然option()方法不是明确的，但它可以用于确定元素是否是jQuery Mobile滑块。如果元素是jQueryMobile滑块，它将返回一个对象。如果它不是jQuery Mobile滑块，或者不是但是jQuery Mobile滑动条，则会抛出错误。
在下面的代码中，在声明了用于测试selector、isMobileSlider()的函数之后，将生成大量控制台输出，以在document准备就绪之前和$(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 Mobile滑块
如果在jQuery Mobile运行（即初始化滑块）之前执行测试，则上面的方法isMobileSlider()返回false。有时，我们可能想测试<input>是否会在jQuery Mobile执行时变成jQuery Mobile滑块。为此，我们可以测试API（当前1.4版本的文档）使用的条件，以确定<input>是否将是jQueryMobile滑块。具体地，这是<input type="range">，并且<input>不具有属性data-role="none"。注意：文档还指出，需要具有与<input>的id匹配的for属性的<label>。但是，测试表明jQuery Mobile实际上并没有强制执行该要求（即，即使没有<label>，<input>也将是jQuery Mobile滑块）。
在这种情况下，由于<input>的相关属性type已更改为type="number"，因此在jQuery Mobile运行后，无法使用以下代码中的willBeMobileSlider()测试<input>。因此，为了涵盖jQueryMobile运行之前和运行之后的测试，我们必须使用两种不同的测试。当然，可以将这两个测试组合起来，以确定元素或选择器是否是或将是jQueryMobile滑块。在下面的代码中，这是在isWillBeMobileSlider()中完成的。
以下代码实现的测试将检测由selector表示的所有元素要么是jQuery Mobile滑块，要么在jQuery Mobile运行后将成为jQuery Mobile滑动条。测试被实现为单独的功能，以防只测试是或将是。与上面的代码一样，在定义了测试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/>注意：T.J.Crowder选择的类对于jQueryMobile滑块的当前实现是一个不错的选择。除了对DOM的各种其他更改外，还有几个其他类被添加到<input>元素中。任何这些更改都可以使用。在这种情况下，类ui-slider-input显得最具体。然而，它依赖于jQueryMobile滑块的未记录的内部实现（即ui-slider-input类将继续应用）。
应该进一步注意的是，当<input>不是jQuery Mobile滑块时抛出错误的Option()方法也没有具体记录。
应该使用哪种测试，测试类ui-slider-input还是抛出错误的Option()方法，还有待商榷。在我看来，测试抛出的错误要好一些。在初始化之前抛出错误的机制似乎是整个jQueryMobile的一种选择，而不仅仅是滑块。然而，使用类ui-slider-input是jQuery Mobile滑块特有的。因此，与更改类相比，更改抛出错误的行为是一个更大、更全面的更改。因此，与更改元素上使用的类名相比，错误行为更改的可能性可能更小。
与@T.J.Crowder的回答类似：
if(typeof $('#mySlider').slider === "function"){
//YES
}
- 引用对象中的通用值
- jQuery匹配JSON对象的部分文本
- 节点导出返回一个空对象
- 如何在Javascript中将JSon对象转换为数组
- 我可以在json对象中添加一个函数吗
- 使用JS将数组转换为json对象
- 全局变量和全局对象的属性之间有什么区别吗
- call(）和apply(）实际上是用来欺骗方法处理类似数组的对象的
- 执行上下文和变量对象在 JavaScript 中实际上是一回事吗?
- 为什么广播在文档中被描述为标志，而它实际上是一个对象
- 如果数组键实际上是字符串，那么数组和对象的区别是什么
- jQuery对象实际上只是init构造函数“增强”
- 如何在从 javascript 中的 json 对象中提取字符串时保留转义序列.(字符串实际上是正则表达式模式）
- 抽象脚本，以便单个页面上的每个选项卡对象实际上不会相互影响
- JavaScript-如何迭代实际上是映射的对象
- 为什么在原型链上操作属性实际上是在对象上创建它
- 为什么有些字面量实际上是对象，而另一些只是非对象字面量
- 三.js:无法补间对象位置 var(获得 null 错误），但对象本身实际上是可用的
- json格式的函数引用参数(实际上是对象字面量)
- 确定特定DOM对象是否实际上是滑块对象
