[英]Multiple Functions When Clicking a Button Twice
So I currently have a table where I can press a button and "deactivate" a row.所以我目前有一个表格,我可以在其中按下一个按钮并“停用”一行。 By deactivating the row, all that happens is the opacity changes and the row appears grayed out signifying the row is "Deactivated."
通过停用该行,所发生的只是不透明度变化并且该行显示为灰色,表示该行已“停用”。 The "Deactivate" button also changes to "Activate."
“停用”按钮也变为“激活”。 What I am wanting is to be able to then hit the "Activate" button and be able to un-gray the row and the button would then change back to "Deactivate."
我想要的是能够然后点击“激活”按钮并能够取消该行的灰色,然后按钮将变回“停用”。
Here is some of my code...这是我的一些代码...
HTML/PHP: 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: 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);
}
}
});
});
To achieve this you just need to slightly restructure your logic to incorporate a class on the tr
element which can be used to signify it's active state.要实现这一点,您只需要稍微重构您的逻辑以在
tr
元素上合并一个类,该类可用于表示它的活动状态。 Try this:尝试这个:
$(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>
It's good idea to play with classes instead.用类来代替是个好主意。 So if the button/row is deactivated give a class to it and toggle the same on click of a button.
因此,如果按钮/行被停用,则为其指定一个类并在单击按钮时切换相同的类。
So the code might look like this,所以代码可能看起来像这样,
$('.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');
});
In above code we're first check if the row
has class called deactivated
, if yes we will ask user if he/she wants to activate it again and do the changes accordingly.在上面的代码中,我们首先检查该
row
是否有名为deactivated
类,如果是,我们将询问用户他/她是否想再次激活它并进行相应的更改。
If the row
doesn't have class called deactivated
we will ask user a confirmation to deactivate the same and do the changes accordingly.如果该
row
没有名为deactivated
类,我们将要求用户确认停用该行并相应地进行更改。
We've used parents() method of a jQuery to access the parent of a clicked element.我们使用了 jQuery 的parents()方法来访问被点击元素的父元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.