当点击一个按钮两次时,多个功能
Multiple Functions When Clicking a Button Twice
所以我目前有一个表,我可以按下一个按钮和"停用"一行。通过取消激活该行,所发生的只是不透明度的变化,该行显示为灰色,表示该行已"取消激活"。"停用"按钮也变为"激活"。我想要的是能够然后点击"激活"按钮,并能够取消灰色行和按钮,然后变回"停用。"
这是我的一些代码…
HTML/PHP:<tr>
<td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td>
<td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td>
<td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td>
<td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>
<td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td>
<td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td>
<td><button class="edit" name="edit">Edit</button>
<button class="deactivate" name="deactivate">Deactivate</button></td>
</tr>
JavaScript: // ----- Deactivate Row -----
$(document).ready(function() {
$('.deactivate').click(function() {
var $this = $(this);
if ($this.html() === 'Deactivate') {
$this.html('Activate');
var result = confirm("Are you sure you want to deactivate this entry?");
if(result) {
$this.closest('tr').css('opacity', 0.5);
}
}
});
});
要实现这一点,您只需要稍微重组您的逻辑,以在tr
元素上合并一个类,可以用来表示它的活动状态。试试这个:
$(document).ready(function() {
$('.deactivate').click(function() {
var $this = $(this);
var $tr = $this.closest('tr');
var action = $tr.hasClass('deactivated') ? 'activate' : 'deactivate';
if (confirm('Are you sure you want to ' + action + ' this entry?')) {
$tr.toggleClass('deactivated');
$this.text(function(i, t) {
return t == 'Deactivate' ? 'Activate' : 'Deactivate';
});
}
})
});
.deactivated {
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="mr_id" contenteditable="false">
MR_ID
</td>
<td class="mr_name" contenteditable="false">
MR_Name
</td>
<td class="buyer_id" contenteditable="false">
Buyer_ID
</td>
<td class="poc_n" contenteditable="false">
MR_POC_N
</td>
<td class="poc_e" contenteditable="false">
MR_POC_E
</td>
<td class="poc_p" contenteditable="false">
MR_POC_P
</td>
<td>
<button class="edit" name="edit">Edit</button>
<button class="deactivate" name="deactivate">Deactivate</button>
</td>
</tr>
<tr>
<td class="mr_id" contenteditable="false">
MR_ID
</td>
<td class="mr_name" contenteditable="false">
MR_Name
</td>
<td class="buyer_id" contenteditable="false">
Buyer_ID
</td>
<td class="poc_n" contenteditable="false">
MR_POC_N
</td>
<td class="poc_e" contenteditable="false">
MR_POC_E
</td>
<td class="poc_p" contenteditable="false">
MR_POC_P
</td>
<td>
<button class="edit" name="edit">Edit</button>
<button class="deactivate" name="deactivate">Deactivate</button>
</td>
</tr>
<tr>
<td class="mr_id" contenteditable="false">
MR_ID
</td>
<td class="mr_name" contenteditable="false">
MR_Name
</td>
<td class="buyer_id" contenteditable="false">
Buyer_ID
</td>
<td class="poc_n" contenteditable="false">
MR_POC_N
</td>
<td class="poc_e" contenteditable="false">
MR_POC_E
</td>
<td class="poc_p" contenteditable="false">
MR_POC_P
</td>
<td>
<button class="edit" name="edit">Edit</button>
<button class="deactivate" name="deactivate">Deactivate</button>
</td>
</tr>
<tr>
<td class="mr_id" contenteditable="false">
MR_ID
</td>
<td class="mr_name" contenteditable="false">
MR_Name
</td>
<td class="buyer_id" contenteditable="false">
Buyer_ID
</td>
<td class="poc_n" contenteditable="false">
MR_POC_N
</td>
<td class="poc_e" contenteditable="false">
MR_POC_E
</td>
<td class="poc_p" contenteditable="false">
MR_POC_P
</td>
<td>
<button class="edit" name="edit">Edit</button>
<button class="deactivate" name="deactivate">Deactivate</button>
</td>
</tr>
</table>
用类来代替是个好主意。因此,如果按钮/行是停用的,给它一个类,并在单击按钮时切换相同的
代码可能是这样的,
$('.deactivate').click(function() {
var $this = $(this);
var parentrow=$(this).parents('tr');
if (parentrow.hasClass('deactivated')) {
var result = confirm("Are you sure you want to activate this entry?");
if (result) {
$this.html('Deactivate');
parentrow.css('opacity', 1);
}
} else {
var result = confirm("Are you sure you want to deactivate this entry?");
if (result) {
$this.html('Activate');
parentrow.css('opacity', 0.5);
}
}
parentrow.toggleClass('deactivated');
});
在上面的代码中,我们首先检查row
是否有称为deactivated
的类,如果是,我们将询问用户是否他/她想再次激活它并相应地进行更改。
如果row
没有称为deactivated
的类,我们将要求用户确认停用相同的并相应地进行更改。
我们已经使用了jQuery的parents()方法来访问被点击元素的父元素
相关文章:
- 当使用jquery live功能时,按钮将被触发两次
- 必须点击两次按钮才能执行功能
- 按钮点击功能启动两次
- 我需要运行此功能两次
- 必须单击按钮两次才能执行功能 - jQuery
- D3.js键功能在简单的选择器/数组组合上运行两次
- 如何限制调用 js 追加功能两次
- Jquery点击功能只工作两次
- slideDown功能需要两次点击才能工作
- Meteor功能执行了两次
- Rest.next()?我的点击功能添加'.活动'两次
- jQuery -必须按下按钮两次或更多次,使功能坚持
- 两次相同的onclick功能-只有一个工作
- 切换功能需要两次点击
- 当点击一个按钮两次时,多个功能
- 必须点击两次切换在1个功能;可以点击一次在另一个
- jQuery按钮,需要点击两次才能实现功能
- 为什么Save按钮需要点击两次才能点击相关功能?
- 为什么这个功能只有在点击两次后才能登录到控制台
- Ajax无限滚动功能触发两次