英文:
How can I succinctly (and temporarily) turn a button into a tab toggler?
问题
这段代码位于jQuery事件监听器内部。$(this) 是一个 <form> 元素。在提交时，提交按钮会变成绿色，显示 "User added" 文本，然后在八秒后恢复为常规的提交按钮。你想在按钮仍然是绿色的情况下点击它时能够激活 "users-table" 标签。
首先，你尝试了以下代码：
.attr('onclick', '$("#users-table").tab("show")')
它在某种程度上起作用，但标签显示在已显示的标签之上，导航标签也没有改变。
然后，你尝试添加了一个新的事件监听器：
$(document).ready(function () {
$('#add-new-user').on('click', '.btn-success', function () {
$('[href="#users-table"]').tab('show');
});
});
这段代码有效，但不够简洁。
你如何能够实现你的目标？ 你希望在无需手动禁用 "add-new-user" 标签并激活 "users-table" 标签按钮的情况下做到这一点。这似乎与 Stack Overflow 上的 "类似" 问题不符。
英文:
Look at this code. It's inside a jQuery event listener. $(this) is a <form> element
const submitButton = $(this).find('[type=submit]');
submitButton.removeClass('btn-primary')
.addClass('btn-success')
.attr('value', 'User added!')
.attr('type', 'button');
setTimeout(function () {
submitButton.removeClass('btn-success')
.addClass('btn-primary')
.attr('value', 'Submit')
.attr('type', 'submit')
}, 9000);
On submit, the submit button becomes green, displays a "User added" text and then, after eight seconds, becomes a regular submit button again. I want it to be able to activate the "users-table" tab on click while it's still green
First, I tried this
.attr('onclick', '$(\'#users-table\').tab(\'show\')')
It kind of worked, but the tab was displayed on top of the already displayed tab and the nav tabs didn't change either
I then tried adding a new event listener
$(document).ready(function () {
$('#add-new-user').on('click', '.btn-success', function () {
$('[href="#users-table"]').tab('show');
});
});
It worked, but it's not succinct
How can I achieve my objective? I would like to avoid manually deactivating the add-new-user tab and activating the users-table tab button (and then reversing it on timeout)
It seems "similar" questions here on SO don't answer my question
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Admin Page</title>
</head>
<body>
<div class="container">
<div class="row mb-2">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#users-table">All Users</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#add-new-user">Add New User</a>
</li>
</ul>
</div>
<div class="row tab-content">
<div id="users-table" class="tab-pane container active">
<table class="table table-hover text-center">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Last name</th>
<th scope="col">Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>IT</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>HR</td>
</tr>
</tbody>
</table>
</div>
<div id="add-new-user" class="tab-pane container">
<h3>Fill in the forms</h3>
<form>
<div class="form-group">
<label for="name">Name: </label>
<input id="name" name="name" type="text" class="form-control" required />
</div>
<div class="form-group">
<label for="last-name">Last name: </label>
<input id="last-name" name="last-name" type="text" class="form-control" required />
</div>
<div class="form-group">
<label for="department">Department: </label>
<select id="department" name="department" class="form-control">
<option value="IT">IT</option>
<option value="HR">HR</option>
<option value="accounting">Accounting</option>
</select>
</div>
<input type="submit" class="btn btn-primary d-flex ml-auto" value="Submit" />
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function () {
$('form').on('submit', async function (event) {
event.preventDefault();
$('tbody').append(
`<tr>
<td>
${$(this).find('[name=name]').val()}
</td>
<td>
${$(this).find('[name=last-name]').val()}
</td>
<td>
${$(this).find('[name=department]').val()}
</td>
</tr>`
);
const submitButton = $(this).find('[type=submit]');
submitButton.removeClass('btn-primary')
.addClass('btn-success')
.attr('value', 'User added!')
.attr('type', 'button');
setTimeout(function () {
submitButton.removeClass('btn-success')
.addClass('btn-primary')
.attr('value', 'Submit')
.attr('type', 'submit')
}, 8000);
});
});
</script>
</body>
</html>
<!-- end snippet -->
答案1
得分: 3
你的选择器显示用户表格的方式是错误的，应该是$('[href="#users-table"]')，而不是$("#users-table")。
我建议避免使用attr来设置处理程序，这会强制你必须转义内容并使你的代码难以阅读。只需使用.click(() => $('[href="#users-table"]').tab('show')); 和 .off('click') 来删除处理程序。
英文:
Your selector to show the users-table was wrong, it should be $('[href="#users-table"]') instead of $("#users-table")
I would avoid setting handlers with attr. That forces you to have to escape content and makes your code hard to read. Just use .click(() => $('[href="#users-table"]').tab('show')); and .off('click') to remove the handlers.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(document).ready(function() {
$('form').on('submit', async function(event) {
event.preventDefault();
$('tbody').append(
`<tr>
<td>
${$(this).find('[name=name]').val()}
</td>
<td>
${$(this).find('[name=last-name]').val()}
</td>
<td>
${$(this).find('[name=department]').val()}
</td>
</tr>`
);
const submitButton = $(this).find('[type=submit]');
submitButton.removeClass('btn-primary')
.addClass('btn-success')
.attr('value', 'User added!')
.attr('type', 'button')
.click(() => $('[href="#users-table"]').tab('show'));
setTimeout(function() {
submitButton.removeClass('btn-success')
.addClass('btn-primary')
.attr('value', 'Submit')
.attr('type', 'submit')
.off('click');
}, 8000);
});
});
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Admin Page</title>
</head>
<body>
<div class="container">
<div class="row mb-2">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#users-table">All Users</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#add-new-user">Add New User</a>
</li>
</ul>
</div>
<div class="row tab-content">
<div id="users-table" class="tab-pane container active">
<table class="table table-hover text-center">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Last name</th>
<th scope="col">Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>IT</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>HR</td>
</tr>
</tbody>
</table>
</div>
<div id="add-new-user" class="tab-pane container">
<h3>Fill in the forms</h3>
<form>
<div class="form-group">
<label for="name">Name: </label>
<input id="name" name="name" type="text" class="form-control" required />
</div>
<div class="form-group">
<label for="last-name">Last name: </label>
<input id="last-name" name="last-name" type="text" class="form-control" required />
</div>
<div class="form-group">
<label for="department">Department: </label>
<select id="department" name="department" class="form-control">
<option value="IT">IT</option>
<option value="HR">HR</option>
<option value="accounting">Accounting</option>
</select>
</div>
<input type="submit" class="btn btn-primary d-flex ml-auto" value="Submit" />
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论