jQuery检查哪些数据类型存在？

Question

有谁知道如何测试哪些数据类型的字段集使用jQuery Mobile？我正在尝试更改水平放置的单选按钮的标签元素的背景颜色，但仅更改垂直放置的单选按钮的UI图标背景颜色。只是不知道如何确定我的代码正在查看哪种类型的单选按钮。

任何想法将不胜感激！

这是我用来显示水平单选按钮的html代码块的示例。

<div data-role="fieldcontain"> 
    <fieldset data-role="controlgroup" data-type="horizontal"> 
     <legend>* Are you a smoker?</legend> 
      <input type="radio" name="smoke" value="Yes" id="smokeY"/> 
      <label for="smokeY" class="radioButton">Yes</label> 

      <input type="radio" name="smoke" value="No" id="smokeN"/> 
      <label for="smokeN" class="radioButton">No</label> 
    </fieldset> 
</div> 

这是我使用显示垂直单选按钮

<div data-role="fieldcontain"> 
    <fieldset data-role="controlgroup"> 
     <legend>* Do you have a vehicle in good working order?</legend>   
      <input type="radio" name="car" value="Yes" id="carY"/> 
      <label for="carY" class="radioButton">Yes</label> 

      <input type="radio" name="car" value="No" id="carN"/> 
      <label for="carN" class="radioButton">No</label> 
    </fieldset> 
</div> 

这里的HTML代码块的样品中途工作的jQuery我使用

for (group in radio_groups) { 
if (!$(":radio[name=" + group + "]:checked").length) { 
    isValid = false; 
    $("input:radio[name=" + group + "]").each(function() { 

    /// this code changes the icon background of vertical radio buttons 
      $(this).next().find('.ui-icon').css('background-color', '#FF7575'); 

    //// i think i need some kind of if statement here that can identify if the radio button 
    //// is horizontal or vertical 

      $(this).next().css('background', '#FF7575'); 
    //// the above changes the lable background of horizontal radio buttons 

     }); 
} else { 
     $("input:radio[name=" + group + "]").each(function() { 
      $(this).next().find('.ui-icon').css('background-color', '#A7E9A7'); 
     }); 
} 
} 

UPDATE：

HERE IS MY WORKING JSFiddle

Answer 1

要阅读称为data-type与jQuery移动一个数据属性，使用jqmData()方法：

$(selector).jqmData("type"); 

试验“水平”，垂直是默认并且可能是不确定的。

这里是一个DEMO

UPDATE：

当你遍历单选按钮，你可以看到，如果他们是通过获取controlgroup家长和检查其水平或垂直类型：

$("input[type='radio']").each(function() { 
    var cg = $(this).parents("fieldset:jqmData(role='controlgroup')"); 
    var IsHoriz = cg.jqmData("type") =='horizontal'; 
    if (IsHoriz){ 
     alert('horiz'); 
    } else { 
     alert('vert'); 
    } 
}); 

更新FIDDLE

Answer 2

你可以只用CSS ...不需要任何JavaScript就做到这一点。它会执行得更快，代码更少！

fieldset input[type="radio"] { ... } // unchecked vertical radio 
fieldset input[type="radio"]+label { ... } // label immediately after unchecked vertical radio 
fieldset input[type="radio"]:checked { ... } // checked vertical radio 
fieldset input[type="radio"]:checked+label { ... } // label immediately after checked vertical radio 

fieldset[data-type="horizontal"] input[type="radio"] { ... } // unchecked horizontal radio 
fieldset[data-type="horizontal"] input[type="radio"]+label { ... } // label immediately after horizontal radio 
fieldset[data-type="horizontal"] input[type="radio"]:checked { ... } // checked horizontal radio 
fieldset[data-type="horizontal"] input[type="radio"]:checked+label { ... } // label immediately following checked horizontal radio 

你甚至会想看看SASS，使这个更简单写。