2

我有五个单选按钮，根据单选按钮的五个不同值，生成五个跨度标签，该单选按钮上的描述如下：

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

它运行良好，但我的问题是每当加载页面时，都不会显示任何描述，即使默认情况下已经选择了两个值，我不知道为什么它不起作用。请给我建议。

4

3 回答 3

2

那是因为您仅在更改事件中显示/隐藏相应的跨度...您需要检查 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();
    });

});

在这里工作小提琴

于 2013-04-19T10:26:24.063 回答
0

您可以将代码更改为这种样式：

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();
});
于 2013-04-19T10:48:26.343 回答
0

因此，在绑定更改事件之前，只需检查单选按钮的现有值并相应地隐藏/显示描述。目前，您只是默认隐藏所有描述

于 2013-04-19T10:21:15.193 回答