RadioButtonList控制行显示隐藏的问题

       在发布商品中,有一个自动上下架时间,同时也有一个RadioButtonLis控件,来控制是否需要实现自动上下架。如果点击“否”,就将下边两行的自动上下架时间隐藏,如果点击”是“就将其显示出来。

       以下代码是这样的:

引用Jquery:

<script src="../../../pixmm/web/js/jquery-1.4.2.min.js" type="text/javascript"></script>

前台代码:

                      <tr >
                            <td class="leftColumn">
                                在指定时间点自动上架和下架:
                            </td>
                            <td class="middleColumn">
                                <asp:RadioButtonList runat="server" ID="rblPro_IsAuto" RepeatDirection="Horizontal" style="width :100px;">
                                    <asp:ListItem Value="0" Selected="True" >否</asp:ListItem>
                                    <asp:ListItem Value="1">是</asp:ListItem>
                                </asp:RadioButtonList>
                            </td>
                        </tr>
                        <tr id="unitRow1" style ="display :none ;">
                            <td class="leftColumn">
                                商品自动上架时间:
                            </td>
                            <td class="middleColumn" style="overflow: visible">         
                                <asp:TextBox ID="txt_Auto"  runat="server"></asp:TextBox>
                             
                                <img οnclick="WdatePicker({el:'txt_Auto'})" src="../../My97DatePickerBeta/My97DatePicker/skin/datePicker.gif" align="absmiddle" style="width: 23px; height: 18px;" />
                                <div id="txt_Autodiv">
                                 </div>
                            </td>
                        </tr>
                       
                        <tr id="unitRow2" style ="display :none ;">
                            <td class="leftColumn">
                               商品自动下架时间:
                            </td>
                            <td>
                                <asp:TextBox ID="txt_Down" runat="server"></asp:TextBox>

                           
                                <img οnclick="WdatePicker({el:'txt_Down'})" src="../../My97DatePickerBeta/My97DatePicker/skin/datePicker.gif" align="absmiddle" style="width: 23px; height: 18px;" />
                                <div id="txt_Downdiv">
                                 </div>
                                 <span id="AupDown" ></span>
                            </td>
                        </tr>

引用Jquery代码:

                     <script type="text/javascript">                       
                          $(function(){
                               showCont();
                      $("#rblPro_IsAuto_0:radio").click(function(){
                            showCont();
                        });
                     $("#rblPro_IsAuto_1:radio").click(function(){
                            showCont();
                       });
                   });
                   function showCont(){
                        switch(jQuery("input[name=rblPro_IsAuto]:checked").attr("id")){
                          case "rblPro_IsAuto_0":
                              $("#unitRow1").hide();
                              $("#unitRow2").hide();
                               break;
                         case "rblPro_IsAuto_1":
                              $("#unitRow1").show();
                              $("#unitRow2").show();
                              break;
                        default:
                           break;
                       }
                 }
               </script>
       这是我最初做的一个小demo,在单独的一个页中,这样运行起来是很成功的,但是一旦加入到我的这个发布商品的页面的时候就不成功了,这是为什么?经过查找资料和排除两种方法得到,Jquery和js中的Prototype.js两者有兼容性的问题。


如何来解决这个问题:

       首先:将引用的Jquery脚本放在Prototype.js这个js脚本后边。

       其次:将以上我们写的JQuery代码改一下下:(将“$”符号用JQuery来代替)

       <script type="text/javascript">
                var jQuery=$;
                jQuery(function(){
                 showCont();
                // $("input[name=price_type]").click(function(){
                //  showCont();
                // });
                    jQuery("#rblPro_IsAuto_0:radio").click(function(){
                        showCont();
                    });
                    jQuery("#rblPro_IsAuto_1:radio").click(function(){
                        showCont();
                    });
                });
                function showCont(){
                     switch(jQuery("input[name=rblPro_IsAuto]:checked").attr("id")){
                      case "rblPro_IsAuto_0":
                       //alert("one");
                       jQuery("#unitRow1").hide();
                       jQuery("#unitRow2").hide();
                       break;
                      case "rblPro_IsAuto_1":
                       jQuery("#unitRow1").show();
                       jQuery("#unitRow2").show();
                       break;
                      default:
                       break;
                     }
                }
            </script>
       这样就可以解决兼容冲突的问题了。

       在这实习期间,最要命的就是有时候往往丢掉一个括号,整个程序都不能进行下去,细节决定成败。同时自己也明白,我学的东西还很少,需要狠狠的加油!!!


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值