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

Question

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

任何想法将不胜感激！

这是我用来显示水平单选按钮的 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>

这是我用来显示垂直单选按钮的 html 代码块示例

<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>

这是我正在使用的一半工作的 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');
      });
 }
}

更新：

HERE IS MY WORKING JSFiddle

Answer 1

要使用 jQuery Mobile 读取名为 data-type 的数据属性，请使用 jqmData() 方法：

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

测试“水平”，因为垂直是默认值并且可能未定义。

这是一个DEMO

更新：

当您迭代单选按钮时，您可以通过获取控件组父级并检查其类型来查看它们是水平的还是垂直的：

$("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 以使其更易于编写。