如何显示/隐藏按钮OnClick？ JavaScript或CSS。 [英] How to Show/Hide upon Button OnClick? JavaScript or CSS.

问题描述

我有两个文本框，当它在列表中时会隐藏。单击编辑后，我想显示文本框可见。 
从下面的代码中，当我说文本框可见时，它会相应地显示。但是我需要在编辑模式下显示文本框。 
请点击按钮，帮助我看看/显示的方法。 
  - 单击编辑按钮后显示文本框
  - 单击保存按钮后隐藏文本框。 
感谢阅读和帮助会很棒。 
 @model IEnumerable <   NameList  >  
 
 <   script     src   = 〜/脚本/ jquery-1.10.2.min.js >  <   / script  >  
 
 <   script     type   =  text / javascript >  
 function ShowEdit（par）{
 $（＃divBDate-+ par）.attr（class，hide）; 
 $（＃txtBDate-+ par）.attr（class，visible）; 
 $（＃divEDate-+ par）.attr（class，hide）; 
 $（＃txtEDate-+ par）.attr（class，visible）; 
 $（＃btnEdit-+ par）.attr（class，hide）; 
 $（＃btnSave-+ par）.attr（class，visible）; 
} 
 
函数SaveEdit（par）{
 $（＃divBDate-+ par）.attr（class，visible）; 
 $（＃txtBDate-+ par）.attr（class，hide）; 
 $（＃divEDate-+ par）.attr（class，visible）; 
 $（＃txtEDate-+ par）.attr（class，hide）; 
 $（＃btnEdit-+ par）.attr（class，visible）; 
 $（＃btnSave-+ par）.attr（class，hide）; 
 
 var -bDate = $（＃txtBDate-+ par）.val（）; 
 var -dDate = $（＃txtEDate-+ par）.val（）; 
 var url ='@ Url.Action（GetUser，Cust）'; 
 $ .post（url，{RoleId：par，userId：-userId，startDate：-startDate}，
 function（data）{
 $（＃divResult）。html（data ）; 
}）; 
} 
 <   / script  >  
 
 
 
 <   div     id   =   divResult >  
 <   table     class   =  table >  
 <   tr  >  
 <   th  > 名称<   / th  >  
 <   th  > 区域<   / th  >  
 <   th  > 开始日期<   / th  >  
 < ;   th  > 结束日期<   / th  >  
  <   / tr  >  
 
 @foreach（NamesList n in模型）
 {
 <   tr  >  
 <   td  >  @ n.Name <   / td  >  
 <   td  >  @ n.Area <   / td  >  
 <   td  < span class =code-keyword>>  
 <   div     id   =  divBDate- @ n.ID    class   = 可见 >  @ n.BDate < ;   / div  >  
 <  输入    id   =  [e-mail] type =    text    class  < span class =code-keyword> = 隐藏   值  =   @ n.BDate   /  >  
 <   / td  >  
 <   td  >  
 <   div     id   =  [e-mail]   类  = 可见 > ;  @ n.EndDate <   / div  >  
 <   input     id   =  [e-mail] type =    text    class   = 隐藏    value   =   @ n .EndDate   /  >  
 <   / td  >  
 <   td  >  
 <  按钮    id   =  [e-mail]    class   =  visible    onclick   =  ShowEdit（@ n.ID）;返回false; > 编辑<   /按钮 >  
 <  按钮    id   =  [e-mail]    class   = 隐藏   < span class =code-attribute> onclick   =  SaveEdit（@ n.ID）;返回false; > 保存<   /按钮 >  
 <   / td  >  
 
 <  < span class =code-leadattribute> / tr  >  
} 
  <   / table  >  
 <   / div  >  

解决方案

（＃divBDate-+ par）.attr（class，hide）;

（＃txtBDate - + par.attr（class，visible）;

（＃divEDate-+ par）.attr（class，hide）;

Hi,
I have Two text boxes which are hide when it's in a list. After Clicking Edit, I would like to show the text boxes visible.
From the below code when I say the text box "visible" it displays accordingly. But I need to show the text boxes when it's in a edit mode.
Please help me how to visible/show when i click the button.
- show the text boxes after i click the "Edit" button
- hide the text boxes after I click the "save" button.
Thanks for reading and help would be great.
@model IEnumerable<NameList>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
function ShowEdit(par) {
$("#divBDate-" + par).attr("class", "hide");
$("#txtBDate-" + par).attr("class", "visible");
$("#divEDate-" + par).attr("class", "hide");
$("#txtEDate-" + par).attr("class", "visible");
$("#btnEdit-" + par).attr("class", "hide");
$("#btnSave-" + par).attr("class", "visible");
}

function SaveEdit(par) {
$("#divBDate-" + par).attr("class", "visible");
$("#txtBDate-" + par).attr("class", "hide");
$("#divEDate-" + par).attr("class", "visible");
$("#txtEDate-" + par).attr("class", "hide");
$("#btnEdit-" + par).attr("class", "visible");
$("#btnSave-" + par).attr("class", "hide");

var -bDate = $("#txtBDate-" + par).val();
var -dDate = $("#txtEDate-" + par).val();
var url = '@Url.Action("GetUser", "Cust")';
$.post(url, { RoleId: par, userId: -userId, startDate: -startDate },
function (data) {
$("#divResult").html(data);
});
}
</script>



<div id=divResult">
<table class="table">
<tr>
<th>Name</th>
<th>Area</th>
<th>Beginning Date</th>
<th>End Date</th>
</tr>

@foreach (NamesList n in Model)
{
<tr>
<td> @n.Name </td>
<td>@n.Area </td>
<td>
<div id="[e-mail]" class="visible">@n.BDate</div>
<input id="[e-mail] type=" text" class="hide" value=@n.BDate />
</td>
<td>
<div id="[e-mail]" class="visible">@n.EndDate</div>
<input id="[e-mail] type=" text" class="hide" value=@n.EndDate />
</td>
<td>
<button id="[e-mail]" class="visible" onclick="ShowEdit(@n.ID); return false;">Edit</button>
<button id="[e-mail]" class="hide" onclick="SaveEdit(@n.ID); return false;">Save</button>
</td>

</tr>
}
</table>
</div>

解决方案

("#divBDate-" + par).attr("class", "hide");

("#txtBDate-" + par).attr("class", "visible");

("#divEDate-" + par).attr("class", "hide");

这篇关于如何显示/隐藏按钮OnClick？ JavaScript或CSS。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！