样式未在动态创建的单选按钮中正确应用 [英] Styles not getting applied properly in dynamically created radio buttons
本文介绍了样式未在动态创建的单选按钮中正确应用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我必须动态创建一个单选按钮组。我能够成功创建它。但问题是动态创建的单选按钮看起来不像静态按钮。
I have to create a radio button group dynamically.I am able to successfully create it.But the problem is that the dynamically created radio buttons do not look like the static ones.
我尝试了两种方法：
1）在字段集上调用 - create ui-corner-all 类在内部跨度上添加，因此所有单选按钮都显示为圆形。
2）在包含 fieldset 的div上调用创建 - 这里的问题更好。但还是有些存在问题。首先，当只有单选按钮时， ui-controlgroup-last 类被添加到该radiobutton.Next，当添加第二个单选按钮时， ui-controlgroup-last 类被添加到该radiobutton.But ui-controlgroup-last 仍然存在于第一个单选按钮和这个循环重复。因此所有单选按钮都具有最后一个单选按钮的样式。
I tried two approaches:
1) Called create on the fieldset - ui-corner-all class is getting added on an inner span and as a result all radio buttons appear rounded.
2) Called create on the div that encloses fieldset - Here the problem is better.But still some problems exist.At first,when there is only radio button, ui-controlgroup-last class is getting added to that radiobutton.Next,when the second radio button is added,the ui-controlgroup-last class is getting added to that radiobutton.But the ui-controlgroup-last is still present in the first radio button and this cycle repeats.As a result all radio buttons have the styles of last radiobutton.
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
<script>
$(document).ready(function()
{
for (var i = 0; i < 3; i++)
{
$("#rgroup1").append('<input type="radio" name="rg1" id="radio1-'+i+'"/><label for="radio1-'+i+'">Value</label>');
$("#rgroup1").trigger("create");
$("#rgroup2").append('<input type="radio" name="rg2" id="radio2-'+i+'"/><label for="radio2-'+i+'">Value</label>');
$("#radiodiv1").trigger("create");
}
});
</script>
</head>
<body>
<div data-role="content">
<h3>Normal radio buttons</h3>
<div id="radiodiv">
<fieldset data-role="controlgroup" id="rgroup">
<input type="radio" name="rg" id="radio-1"/><label for="radio-1">Value</label>
<input type="radio" name="rg" id="radio-2"/><label for="radio-2">Value</label>
<input type="radio" name="rg" id="radio-3"/><label for="radio-3">Value</label>
</fieldset>
</div>
<h3>Dynamically created-Div Refresh</h3>
<div id="radiodiv">
<fieldset data-role="controlgroup" id="rgroup1">
</fieldset>
</div>
<h3>Dynamically created-Fieldset Refresh</h3>
<div id="radiodiv1">
<fieldset data-role="controlgroup" id="rgroup2">
</fieldset>
</div>
</div>
</body>
PS - 我之所以这样做我在每次追加之后调用create是因为它在我的实际用例中是如何工作的 - 任何时候都只创建一个单选按钮。
P.S - The reason why I am calling create after each append is because thats how it works in my actual usecase-Only one radio button is created at any time.
生成的源
<html lang="en" class="ui-mobile"><head><base href="http://localhost:8081/html5/calendar-new/radio_issue.html">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
<script>
$(document).ready(function()
{
for (var i = 0; i < 3; i++)
{
$("#rgroup1").append('<input type="radio" name="rg1" id="radio1-'+i+'"/><label for="radio1-'+i+'">Value</label>');
$("#rgroup1").trigger("create");
$("#rgroup2").append('<input type="radio" name="rg2" id="radio2-'+i+'"/><label for="radio2-'+i+'">Value</label>');
$("#radiodiv1").trigger("create");
}
});
</script>
<title></title></head>
<body class="ui-mobile-viewport"><div data-role="page" data-url="/html5/calendar-new/radio_issue.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 933px; ">
<div data-role="content" class="ui-content" role="main">
<h3>Normal radio buttons</h3>
<div id="radiodiv">
<fieldset data-role="controlgroup" id="rgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">
<div class="ui-radio"><input type="radio" name="rg" id="radio-1"><label for="radio-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-top ui-btn-up-c"><span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div>
<div class="ui-radio"><input type="radio" name="rg" id="radio-2"><label for="radio-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div>
<div class="ui-radio"><input type="radio" name="rg" id="radio-3"><label for="radio-3" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div>
</fieldset>
</div>
<h3>Dynamically created-Div Refresh</h3>
<div id="radiodiv">
<fieldset data-role="controlgroup" id="rgroup1" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">
<div class="ui-radio"><input type="radio" name="rg1" id="radio1-0"><label for="radio1-0" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg1" id="radio1-1"><label for="radio1-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg1" id="radio1-2"><label for="radio1-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-radio-off ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div></fieldset>
</div>
<h3>Dynamically created-Fieldset Refresh</h3>
<div id="radiodiv1">
<fieldset data-role="controlgroup" id="rgroup2" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">
<div class="ui-radio"><input type="radio" name="rg2" id="radio2-0"><label for="radio2-0" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-top ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg2" id="radio2-1"><label for="radio2-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div><div class="ui-radio"><input type="radio" name="rg2" id="radio2-2"><label for="radio2-2" data-theme="c" class="ui-btn ui-btn-icon-left ui-radio-off ui-corner-bottom ui-controlgroup-last ui-btn-up-c"><span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Value</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow"></span></span></label></div></fieldset>
</div>
</div>
</div><div class="ui-loader ui-body-a ui-corner-all" style="top: 290px; "><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div></body></html>
推荐答案
我通过明确删除<$ c修复了这个问题$ c> ui-controlgroup-last 和 ui-corner-bottom 来自所有标签的类，除了最后一个单选按钮的标签
I fixed this issue by explicitly removing the ui-controlgroup-last and ui-corner-bottom classes from all the labels except the label for the last radio button
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
<script>
$(document).ready(function()
{
for (var i = 0; i < 3; i++)
{
/*$("#rgroup1").append('<input type="radio" name="rg1" id="radio1-'+i+'"/><label id="label1-'+i+'" for="radio1-'+i+'">Value</label>');
$("#rgroup1").trigger("create");*/
$("#rgroup2").append('<input type="radio" name="rg2" id="radio2-'+i+'"/><label id="label2-'+i+'"for="radio2-'+i+'">Value</label>');
$("#radiodiv1").trigger("create");
}
for (var i = 0; i < 2; i++)
{
$('#label2-'+i).removeClass("ui-controlgroup-last ui-corner-bottom");
}
});
</script>
</head>
<body>
<div data-role="content">
<h3>Normal radio buttons</h3>
<div id="radiodiv">
<fieldset data-role="controlgroup" id="rgroup">
<input type="radio" name="rg" id="radio-1"/><label for="radio-1">Value</label>
<input type="radio" name="rg" id="radio-2"/><label for="radio-2">Value</label>
<input type="radio" name="rg" id="radio-3"/><label for="radio-3">Value</label>
</fieldset>
</div>
<!-- <h3>Dynamically created-Div Refresh</h3>
<div id="radiodiv">
<fieldset data-role="controlgroup" id="rgroup1">
</fieldset>
</div> -->
<h3>Dynamically created-Fieldset Refresh</h3>
<div id="radiodiv1">
<fieldset data-role="controlgroup" id="rgroup2">
</fieldset>
</div>
</div>
</body>
这篇关于样式未在动态创建的单选按钮中正确应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
