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

Does anyone know how to test which data-type a fieldset has using jQuery Mobile? I am attempting to change the background color of the label element for radio buttons that are positioned horizontally but only change the ui-icon background color of radio buttons that are positioned vertically. Just can't figure out how to determine which type of radio button my code is looking at.

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

Any ideas would be greatly appreciated!

任何想法将不胜感激!

This is a sample to the html code block I am using to display horizontal radio buttons.

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

This is a sample of the html code block I am using to display vertical radio buttons

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

Here is the halfway working jQuery I am using

这是我正在使用的中途工作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

这是我工作的JSFiddle

2 个解决方案

#1

To read a data attribute called data-type with jQuery Mobile, use the jqmData() method:

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

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

Test for "horizontal", as vertical is default and could be undefined.

测试“水平”,因为垂直是默认的,可能是未定义的。

Here is a DEMO

这是一个DEMO

UPDATE:

As you iterate the radio buttons, you can see if they are horizontal or vertical by getting the controlgroup parent and checking its type:

在迭代单选按钮时,您可以通过获取控制组父级并检查其类型来查看它们是水平还是垂直:

$("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');
    }
});

Updated FIDDLE

#2

You can accomplish this with just CSS...no need for any Javascript at all. It will execute faster and is less code to maintain!

你可以用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

You might even want to check out SASS to make this even simpler to write.

您甚至可能想要查看SASS以使其更简单。

#1