页面加载默认值是否未在jQuery中显示？
页面加载默认值是否未在jQuery中显示？
提问于 2013-04-19 18:18:23
我有五个单选按钮，根据单选按钮的五个不同值，将生成五个span标记，并对此单选按钮进行如下描述：
<table class="jshop">
<tbody>
<tr>
<td class="attributes_title">
<span class="attributes_name">Model:</span><span class="attributes_description"></span>
</td>
<td>
<span id="block_attr_sel_3">
<span class="input_type_radio">
<input type="radio" name="jshop_attr_id[3]" id="jshop_attr_id35" value="5" checked="true" onclick="setAttrValue('3', this.value);">
<label for="jshop_attr_id35"><span class="radio_attr_label">16 GB</span></label>
</span>
<span class="input_type_radio">
<input type="radio" name="jshop_attr_id[3]" id="jshop_attr_id36" value="6" onclick="setAttrValue('3', this.value);">
<label for="jshop_attr_id36"><span class="radio_attr_label">32 GB</span></label></span>
</span>
</td>
</tr>
<tr>
<td class="attributes_title">
<span class="attributes_name">What Type?:</span><span class="attributes_description"></span>
</td>
<td>
<span id="block_attr_sel_5">
<span class="input_type_radio">
<input type="radio" name="jshop_attr_id[5]" id="jshop_attr_id59" value="9" checked="true" onclick="setAttrValue('5', this.value);">
<label for="jshop_attr_id59"><span class="radio_attr_label">Broken</span></label>
</span>
<span class="input_type_radio">
<input type="radio" name="jshop_attr_id[5]" id="jshop_attr_id510" value="10" onclick="setAttrValue('5', this.value);">
<label for="jshop_attr_id510"><span class="radio_attr_label">Good</span></label>
</span>
<span class="input_type_radio">
<input type="radio" name="jshop_attr_id[5]" id="jshop_attr_id511" value="11" onclick="setAttrValue('5', this.value);">
<label for="jshop_attr_id511"><span class="radio_attr_label">Flawless</span></label></span>
</span>
</td>
</tr>
</tbody>
</table>
<span id="attr_5" class="attr_desc"></span>
<span id="attr_6" class="attr_desc"></span>
<span id="attr_9" class="attr_desc">test1</span>
<span id="attr_10" class="attr_desc">test2</span>
<span id="attr_11" class="attr_desc">test3</span>现在我希望每当用户从上面的单选按钮中选择一个时，相关的描述都会显示出来。所以我试着这样做：
<script>
jQuery(document).ready(function() {
jQuery(".input_type_radio input[type=radio]").change(function() {
jQuery(".attr_desc").hide();
var test = jQuery(this).val();
jQuery("#attr_" + test).show();
});
jQuery(".attr_desc").hide();
});
</script>它工作得很好，但我的问题是，每当页面加载时，都不会显示任何描述，即使在默认情况下已经选择了两个值，我也不知道为什么它不能工作。请推荐我。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-04-19 18:26:24
这是因为您仅在更改事件中显示/隐藏了相应的范围...您需要在document.ready中检查选中的值，并同样显示/隐藏
尝尝这个
jQuery(document).ready(function() {
jQuery(".input_type_radio input[type=radio]").change(function() {
..... //your code
});
jQuery(".input_type_radio input[type=radio]:checked").each(function(){
jQuery("#attr_" + $(this).val()).show();
});
});working fiddle here
Stack Overflow用户
发布于 2013-04-19 18:21:15
因此，在绑定更改事件之前，只需检查单选按钮的现有值并相应地隐藏/显示描述即可。目前，您只需在默认情况下隐藏所有描述
Stack Overflow用户
发布于 2013-04-19 18:48:26
您可以将代码更改为此样式：
jQuery(document).ready(function() {
jQuery(".input_type_radio input[type=radio]").change(function() {
showDesc();
});
function showDesc() {
jQuery(".attr_desc").hide();
var test = jQuery(".input_type_radio input[type=radio]:checked").val();
jQuery("#attr_" + test).show();
}
showDesc();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16102372
复制相关文章
相似问题
腾讯云开发者
