使用bootstrap和jquery，我创建了与模态弹出窗口链接的表。在表格中，我有两个操作图标
- 激活
- 停用
我需要在弹出窗口中单击此"激活"按钮，当前TD中的激活图标需要更改为停用图标。就像对停用图标所做的相同需求一样。请帮助我找出答案。
下面是代码。
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Jayashree</span></a></td>
<td><span class="lsusrlname">Gopalan</span></td>
<td align=center>
<a href="#" data-toggle="modal" data-target="#usract"><span class="usrin glyphicon glyphicon-ok" title="Activate"> </span></a>
</td>
</tr>
<tr>
<td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Siva</span></a></td>
<td><span class="lsusrlname">Prasad</span></td>
<td align=center>
<a href="#" data-toggle="modal" data-target="#usrdeact"><span class="usrrm glyphicon glyphicon-remove" title="De-Activate"> </span></a>
</td>
</tr>
</tbody>
</table>
</div>
模型窗口：
<div class="modal fade" id="usract" role="dialog">
<div class="modal-dialog uc-modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Activate user</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-horizontal disableform">
<div class="form-group">
<!-- add "has-error" for validation-->
<label class="control-label col-xs-6 col-md-4">First Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control fname" placeholder="First Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
<div class="form-group">
<!-- add has-error for validation-->
<label class="control-label col-xs-6 col-md-4">Last Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control lname" placeholder="Last Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
</div>
<p>Are you sure want to Activate this User ?
<button type="button" class="btn btn-success" id="actusr" data-dismiss="modal" >Activate</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="usrdeact" role="dialog">
<div class="modal-dialog uc-modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">De-Activate user</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-horizontal disableform">
<div class="form-group">
<!-- add "has-error" for validation-->
<label class="control-label col-xs-6 col-md-4">First Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control fname" placeholder="First Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
<div class="form-group">
<!-- add has-error for validation-->
<label class="control-label col-xs-6 col-md-4">Last Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control lname" placeholder="Last Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
</div>
<p>Are you sure want to De-Activate this User ?
<button type="button" class="btn btn-success" id="de_actusr">De-Activate</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
Jquery ：
$(".usrrm, .usrin").click(function(){
var tdusrname=$(this).parents("tr").children("td:first").text();
$(".fname").val(tdusrname);
var tdlname=$(this).parents("tr").children("td:nth-child(2)").text();
$(".lname").val(tdlname);
});
$("#actusr").click(function(){
$('tr td span').removeClass('usrm glyphicon glyphicon-ok');
$('tr td span').addClass('usrin glyphicon glyphicon-remove');
});
$("#de_actusr").click(function(){
$('tr td span').removeClass('usrm glyphicon glyphicon-remove');
$('tr td span').addClass('usrin glyphicon glyphicon-ok');
});
请帮我找出这个
如果只是需要更改的前端内容，并且您不太关心后端，那么您可以使用jQuery根据需要添加和删除类。使用你的小提琴：
/* Click the tick button and add a class of current */
$('.usrin').each(function(){
$(this).on('click' , function(){
$(this).addClass('current');
});
});
/* Click the x button and add a class of current */
$('.usrrm').each(function(){
$(this).on('click' , function(){
$(this).addClass('current');
});
});
/* Click the activate button and change the classes of the tick or x */
$('#actusr').on('click' , function(){
var current = $('.table-responsive').find('.current');
current.toggleClass('usrin glyphicon-ok usrrm glyphicon-remove');
});
/* Click the de-activate button and change the classes of the tick or x */
$('#de_actusr').on('click' , function(){
var current = $('.table-responsive').find('.current');
current.toggleClass('usrin glyphicon-ok usrrm glyphicon-remove');
})
/* Click the window close button and remove the current class */
$('.close').on('click' , function(){
var current = $('.table-responsive').find('.current');
current.removeClass('current');
});
我已经对它进行了广泛的评论，但它似乎可以满足您的需求。首先，当单击字形时，我们需要为触发模态的元素"书签"，无论是激活还是停用。然后，如果模式被关闭，我们需要删除该书签。如果用户单击了激活/停用按钮，我们需要执行许多操作（可能包括后端处理）：我们需要删除该书签、更新字形类、重定向目标模式以及更改工具提示文本。看到它在下面工作，或作为小提琴。
同样，我的代码应该非常清楚地记录在案。祝你好运！
$(".usrrm, .usrin").click(function() {
// Mark the element that triggered the modals. we'll need this later.
$(this).parent().addClass("currently-active-el");
// Populate the modal fields.
var tdusrname = $(this).parents("tr").children("td:first").text();
$(".fname").val(tdusrname);
var tdlname = $(this).parents("tr").children("td:nth-child(2)").text();
$(".lname").val(tdlname);
});
/*****
* #actusr.click() - we are activating this user. At this point,
* we need to go back to that element that triggered the modal,
* and remove its flagging class. We have a few other things we
* need to do: first, redirect the modal target from the active
* modal to the deactive modal, and change the icons for the span.
*
*****/
$("#actusr").click(function() {
$(".currently-active-el")
.attr("data-target", "#usrdeact") // redirect the target modal,
.removeClass("currently-active-el"). // remove the placeholder
find("span")
.removeClass('usrin glyphicon-ok') // toggle the glyph class
.addClass('usrrm glyphicon-remove')
.prop("title", "Deactivate") // change the tooltip text
});
/*****
* #de_actusr.click() - we are deactivating this user. At this point,
* we need to go back to that element that triggered the modal,
* and remove its flagging class. We have a few other things we
* need to do: first, redirect the modal target from the active
* modal to the active modal, and change the icons for the span.
*
*****/
$("#de_actusr").click(function(evt) {
$(".currently-active-el")
.attr("data-target", "#usract") // redirect the target modal,
.removeClass("currently-active-el"). // remove the placeholder
find("span")
.removeClass('usrrm glyphicon-remove')
.addClass('usrin glyphicon-ok') // toggle the glyph class
.prop("title", "Activate") // change the tooltip text
});
/*****
* Any modal button that dismisses the modal also needs to remove
* the placeholder class. Otherwise, things will get messy fast.
*****/
$("[data-dismiss='modal']").on("click", function(){
$(".currently-active-el")
.removeClass("currently-active-el");
}).usrin{color: #ccc;}
.usrrm{color: #d9534f;}
.usrin:hover, .usrin:focus, .usrin:active, .usrin:visited{color: #66b90e;}
.usrrm:hover, .usrrm:focus, .usrrm:active, .usrrm:visited{color: #c9302c;}
.table > thead{
background-color:#337ab7;
color: #eee;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Jayashree</span></a></td>
<td><span class="lsusrlname">Gopalan</span></td>
<td align=center>
<a href="#" data-toggle="modal" data-target="#usract"><span class="usrin glyphicon glyphicon-ok" title="Activate"> </span></a>
</td>
</tr>
<tr>
<td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Siva</span></a></td>
<td><span class="lsusrlname">Prasad</span></td>
<td align=center>
<a href="#" data-toggle="modal" data-target="#usrdeact"><span class="usrrm glyphicon glyphicon-remove" title="De-Activate"> </span></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="usract" role="dialog">
<div class="modal-dialog uc-modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Activate user</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-horizontal disableform">
<div class="form-group">
<!-- add "has-error" for validation-->
<label class="control-label col-xs-6 col-md-4">First Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control fname" placeholder="First Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
<div class="form-group">
<!-- add has-error for validation-->
<label class="control-label col-xs-6 col-md-4">Last Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control lname" placeholder="Last Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
</div>
<p>Are you sure want to Activate this User ?
<button type="button" class="btn btn-success" id="actusr" data-dismiss="modal" >Activate</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="usrdeact" role="dialog">
<div class="modal-dialog uc-modal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">De-Activate user</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-horizontal disableform">
<div class="form-group">
<!-- add "has-error" for validation-->
<label class="control-label col-xs-6 col-md-4">First Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control fname" placeholder="First Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
<div class="form-group">
<!-- add has-error for validation-->
<label class="control-label col-xs-6 col-md-4">Last Name</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control lname" placeholder="Last Name">
<!--<span class="help-block">You can't leave this empty.</span>-->
</div>
</div>
</div>
<p>Are you sure want to De-Activate this User ?
<button type="button" class="btn btn-success" id="de_actusr" data-dismiss="modal">De-Activate</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">NO</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>打开模态时，您需要专注于事件。看这里
$('#myModal').on('shown.bs.modal', function () {
//do the necessary things
})