RadioButtonList控制行显示隐藏的问题

最新推荐文章于 2019-04-07 22:34:00 发布

原创最新推荐文章于 2019-04-07 22:34:00 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

实习专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个关于在商品发布页面中使用JQuery控制元素显示与隐藏的小案例，并详细解释了解决JQuery与Prototype.js兼容性问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在发布商品中，有一个自动上下架时间，同时也有一个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 onclick="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 onclick="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>

这样就可以解决兼容冲突的问题了。

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