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>

这是我用来显示垂直单选按钮的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");

测试＆＃34;水平＆＃34;，因为垂直是默认值，可能是未定义的。

这是 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，以便更简单地编写。

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

2 个答案: