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 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>
这样就可以解决兼容冲突的问题了。
在这实习期间，最要命的就是有时候往往丢掉一个括号，整个程序都不能进行下去，细节决定成败。同时自己也明白，我学的东西还很少，需要狠狠的加油！！！