如何简洁地（临时）将按钮转换为选项卡切换器？

huangapple
go评论98阅读模式
英文:

How can I succinctly (and temporarily) turn a button into a tab toggler?

问题

这段代码位于jQuery事件监听器内部。$(this) 是一个 <form> 元素。在提交时，提交按钮会变成绿色，显示 "User added" 文本，然后在八秒后恢复为常规的提交按钮。你想在按钮仍然是绿色的情况下点击它时能够激活 "users-table" 标签。

首先，你尝试了以下代码：

  1. .attr('onclick', '$("#users-table").tab("show")')

它在某种程度上起作用，但标签显示在已显示的标签之上，导航标签也没有改变。

然后，你尝试添加了一个新的事件监听器：

  1. $(document).ready(function () {
  2.     $('#add-new-user').on('click', '.btn-success', function () {
  3.         $('[href="#users-table"]').tab('show');
  4.     });
  5. });

这段代码有效，但不够简洁。

你如何能够实现你的目标？ 你希望在无需手动禁用 "add-new-user" 标签并激活 "users-table" 标签按钮的情况下做到这一点。这似乎与 Stack Overflow 上的 "类似" 问题不符。

英文:

Look at this code. It's inside a jQuery event listener. $(this) is a &lt;form&gt; element

  1.             const submitButton = $(this).find(&#39;[type=submit]&#39;);
  3.             submitButton.removeClass(&#39;btn-primary&#39;)
  4.                 .addClass(&#39;btn-success&#39;)
  5.                 .attr(&#39;value&#39;, &#39;User added!&#39;)
  6.                 .attr(&#39;type&#39;, &#39;button&#39;);
  8.             setTimeout(function () {
  9.                 submitButton.removeClass(&#39;btn-success&#39;)
  10.                     .addClass(&#39;btn-primary&#39;)
  11.                     .attr(&#39;value&#39;, &#39;Submit&#39;)
  12.                     .attr(&#39;type&#39;, &#39;submit&#39;)
  13.             }, 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

  1. .attr(&#39;onclick&#39;, &#39;$(\&#39;#users-table\&#39;).tab(\&#39;show\&#39;)&#39;)

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

  1. $(document).ready(function () {
  2.     $(&#39;#add-new-user&#39;).on(&#39;click&#39;, &#39;.btn-success&#39;, function () {
  3.         $(&#39;[href=&quot;#users-table&quot;]&#39;).tab(&#39;show&#39;);
  4.     });
  5. });

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 -->

  1.     &lt;!DOCTYPE html&gt;
  2.     &lt;html lang=&quot;en&quot;&gt;
  3.     &lt;head&gt;
  4.         &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.         &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
  6.         &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot;
  7.               integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;
  8.         &lt;title&gt;Admin Page&lt;/title&gt;
  9.     &lt;/head&gt;
  10.     &lt;body&gt;
  11.     &lt;div class=&quot;container&quot;&gt;
  12.         &lt;div class=&quot;row mb-2&quot;&gt;
  13.             &lt;ul class=&quot;nav nav-tabs&quot;&gt;
  14.                 &lt;li class=&quot;nav-item&quot;&gt;
  15.                     &lt;a class=&quot;nav-link active&quot; data-toggle=&quot;tab&quot; href=&quot;#users-table&quot;&gt;All Users&lt;/a&gt;
  16.                 &lt;/li&gt;
  17.                 &lt;li class=&quot;nav-item&quot;&gt;
  18.                     &lt;a class=&quot;nav-link&quot; data-toggle=&quot;tab&quot; href=&quot;#add-new-user&quot;&gt;Add New User&lt;/a&gt;
  19.                 &lt;/li&gt;
  20.             &lt;/ul&gt;
  21.        &lt;/div&gt;
  22.             &lt;div class=&quot;row tab-content&quot;&gt;
  23.             &lt;div id=&quot;users-table&quot; class=&quot;tab-pane container active&quot;&gt;
  24.             &lt;table class=&quot;table table-hover text-center&quot;&gt;
  25.                       &lt;thead&gt;
  26.                             &lt;tr&gt;
  27.                                 &lt;th scope=&quot;col&quot;&gt;Name&lt;/th&gt;
  28.                                 &lt;th scope=&quot;col&quot;&gt;Last name&lt;/th&gt;
  29.                                 &lt;th scope=&quot;col&quot;&gt;Department&lt;/th&gt;
  30.                             &lt;/tr&gt;
  31.                       &lt;/thead&gt;
  32.                       &lt;tbody&gt;
  33.                             &lt;tr&gt;
  34.                                 &lt;td&gt;John&lt;/td&gt;
  35.                                 &lt;td&gt;Doe&lt;/td&gt;
  36.                                 &lt;td&gt;IT&lt;/td&gt;
  37.                             &lt;/tr&gt;
  38.                             &lt;tr&gt;
  39.                                 &lt;td&gt;Jane&lt;/td&gt;
  40.                                 &lt;td&gt;Doe&lt;/td&gt;
  41.                                 &lt;td&gt;HR&lt;/td&gt;
  42.                             &lt;/tr&gt;
  43.                      &lt;/tbody&gt;
  44.               &lt;/table&gt;
  45.             &lt;/div&gt;
  46.            &lt;div id=&quot;add-new-user&quot; class=&quot;tab-pane container&quot;&gt;
  47.               &lt;h3&gt;Fill in the forms&lt;/h3&gt;
  48.                               &lt;form&gt;
  49.                                   &lt;div class=&quot;form-group&quot;&gt;
  50.                                       &lt;label for=&quot;name&quot;&gt;Name: &lt;/label&gt;
  51.                                       &lt;input id=&quot;name&quot; name=&quot;name&quot; type=&quot;text&quot; class=&quot;form-control&quot; required /&gt;
  52.                                   &lt;/div&gt;
  54.                                   &lt;div class=&quot;form-group&quot;&gt;
  55.                                       &lt;label for=&quot;last-name&quot;&gt;Last name: &lt;/label&gt;
  56.                                       &lt;input id=&quot;last-name&quot; name=&quot;last-name&quot; type=&quot;text&quot; class=&quot;form-control&quot; required /&gt;
  57.                                   &lt;/div&gt;
  59.                                   &lt;div class=&quot;form-group&quot;&gt;
  60.                                       &lt;label for=&quot;department&quot;&gt;Department: &lt;/label&gt;
  61.                                       &lt;select id=&quot;department&quot; name=&quot;department&quot; class=&quot;form-control&quot;&gt;
  62.                                           &lt;option value=&quot;IT&quot;&gt;IT&lt;/option&gt;
  63.                                           &lt;option value=&quot;HR&quot;&gt;HR&lt;/option&gt;
  64.                                           &lt;option value=&quot;accounting&quot;&gt;Accounting&lt;/option&gt;
  65.                                       &lt;/select&gt;
  66.                                   &lt;/div&gt;
  68.                                   &lt;input type=&quot;submit&quot; class=&quot;btn btn-primary d-flex ml-auto&quot; value=&quot;Submit&quot; /&gt;
  69.                               &lt;/form&gt;
  70.                   &lt;/div&gt;
  71.               &lt;/div&gt;
  72.           &lt;/div&gt;
  73.     &lt;/div&gt;
  74.     &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js&quot;&gt;&lt;/script&gt;
  75.     &lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
  76.     &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
  77.     &lt;script&gt;
  78. $(document).ready(function () {
  79. $(&#39;form&#39;).on(&#39;submit&#39;, async function (event) {
  80.     event.preventDefault();
  81.     $(&#39;tbody&#39;).append(
  82.     `&lt;tr&gt;
  83.          &lt;td&gt;
  84.              ${$(this).find(&#39;[name=name]&#39;).val()}
  85.          &lt;/td&gt;
  86.          &lt;td&gt;
  87.              ${$(this).find(&#39;[name=last-name]&#39;).val()}
  88.          &lt;/td&gt;
  89.          &lt;td&gt;
  90.              ${$(this).find(&#39;[name=department]&#39;).val()}
  91.          &lt;/td&gt;
  92.      &lt;/tr&gt;`
  93.     );
  94.             const submitButton = $(this).find(&#39;[type=submit]&#39;);
  96.             submitButton.removeClass(&#39;btn-primary&#39;)
  97.                 .addClass(&#39;btn-success&#39;)
  98.                 .attr(&#39;value&#39;, &#39;User added!&#39;)
  99.                 .attr(&#39;type&#39;, &#39;button&#39;);
  101.             setTimeout(function () {
  102.                 submitButton.removeClass(&#39;btn-success&#39;)
  103.                     .addClass(&#39;btn-primary&#39;)
  104.                     .attr(&#39;value&#39;, &#39;Submit&#39;)
  105.                     .attr(&#39;type&#39;, &#39;submit&#39;)
  106.             }, 8000);
  107. });
  108. });
  109.     &lt;/script&gt;
  110.     &lt;/body&gt;
  111.     &lt;/html&gt;

<!-- 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 $(&#39;[href=&quot;#users-table&quot;]&#39;) instead of $(&quot;#users-table&quot;)

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(() =&gt; $(&#39;[href=&quot;#users-table&quot;]&#39;).tab(&#39;show&#39;)); and .off(&#39;click&#39;) to remove the handlers.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(document).ready(function() {
  2.   $(&#39;form&#39;).on(&#39;submit&#39;, async function(event) {
  3.     event.preventDefault();
  4.     $(&#39;tbody&#39;).append(
  5.       `&lt;tr&gt;
  6.          &lt;td&gt;
  7.              ${$(this).find(&#39;[name=name]&#39;).val()}
  8.          &lt;/td&gt;
  9.          &lt;td&gt;
  10.              ${$(this).find(&#39;[name=last-name]&#39;).val()}
  11.          &lt;/td&gt;
  12.          &lt;td&gt;
  13.              ${$(this).find(&#39;[name=department]&#39;).val()}
  14.          &lt;/td&gt;
  15.      &lt;/tr&gt;`
  16.     );
  17.     const submitButton = $(this).find(&#39;[type=submit]&#39;);
  19.     submitButton.removeClass(&#39;btn-primary&#39;)
  20.       .addClass(&#39;btn-success&#39;)
  21.       .attr(&#39;value&#39;, &#39;User added!&#39;)
  22.       .attr(&#39;type&#39;, &#39;button&#39;)
  23.       .click(() =&gt; $(&#39;[href=&quot;#users-table&quot;]&#39;).tab(&#39;show&#39;));
  25.     setTimeout(function() {
  26.       submitButton.removeClass(&#39;btn-success&#39;)
  27.         .addClass(&#39;btn-primary&#39;)
  28.         .attr(&#39;value&#39;, &#39;Submit&#39;)
  29.         .attr(&#39;type&#39;, &#39;submit&#39;)
  30.         .off(&#39;click&#39;);
  32.     }, 8000);
  33.   });
  34. });

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  4. &lt;head&gt;
  5.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  6.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
  7.   &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;
  8.   &lt;title&gt;Admin Page&lt;/title&gt;
  9. &lt;/head&gt;
  11. &lt;body&gt;
  12.   &lt;div class=&quot;container&quot;&gt;
  13.     &lt;div class=&quot;row mb-2&quot;&gt;
  14.       &lt;ul class=&quot;nav nav-tabs&quot;&gt;
  15.         &lt;li class=&quot;nav-item&quot;&gt;
  16.           &lt;a class=&quot;nav-link active&quot; data-toggle=&quot;tab&quot; href=&quot;#users-table&quot;&gt;All Users&lt;/a&gt;
  17.         &lt;/li&gt;
  18.         &lt;li class=&quot;nav-item&quot;&gt;
  19.           &lt;a class=&quot;nav-link&quot; data-toggle=&quot;tab&quot; href=&quot;#add-new-user&quot;&gt;Add New User&lt;/a&gt;
  20.         &lt;/li&gt;
  21.       &lt;/ul&gt;
  22.     &lt;/div&gt;
  23.     &lt;div class=&quot;row tab-content&quot;&gt;
  24.       &lt;div id=&quot;users-table&quot; class=&quot;tab-pane container active&quot;&gt;
  25.         &lt;table class=&quot;table table-hover text-center&quot;&gt;
  26.           &lt;thead&gt;
  27.             &lt;tr&gt;
  28.               &lt;th scope=&quot;col&quot;&gt;Name&lt;/th&gt;
  29.               &lt;th scope=&quot;col&quot;&gt;Last name&lt;/th&gt;
  30.               &lt;th scope=&quot;col&quot;&gt;Department&lt;/th&gt;
  31.             &lt;/tr&gt;
  32.           &lt;/thead&gt;
  33.           &lt;tbody&gt;
  34.             &lt;tr&gt;
  35.               &lt;td&gt;John&lt;/td&gt;
  36.               &lt;td&gt;Doe&lt;/td&gt;
  37.               &lt;td&gt;IT&lt;/td&gt;
  38.             &lt;/tr&gt;
  39.             &lt;tr&gt;
  40.               &lt;td&gt;Jane&lt;/td&gt;
  41.               &lt;td&gt;Doe&lt;/td&gt;
  42.               &lt;td&gt;HR&lt;/td&gt;
  43.             &lt;/tr&gt;
  44.           &lt;/tbody&gt;
  45.         &lt;/table&gt;
  46.       &lt;/div&gt;
  47.       &lt;div id=&quot;add-new-user&quot; class=&quot;tab-pane container&quot;&gt;
  48.         &lt;h3&gt;Fill in the forms&lt;/h3&gt;
  49.         &lt;form&gt;
  50.           &lt;div class=&quot;form-group&quot;&gt;
  51.             &lt;label for=&quot;name&quot;&gt;Name: &lt;/label&gt;
  52.             &lt;input id=&quot;name&quot; name=&quot;name&quot; type=&quot;text&quot; class=&quot;form-control&quot; required /&gt;
  53.           &lt;/div&gt;
  55.           &lt;div class=&quot;form-group&quot;&gt;
  56.             &lt;label for=&quot;last-name&quot;&gt;Last name: &lt;/label&gt;
  57.             &lt;input id=&quot;last-name&quot; name=&quot;last-name&quot; type=&quot;text&quot; class=&quot;form-control&quot; required /&gt;
  58.           &lt;/div&gt;
  60.           &lt;div class=&quot;form-group&quot;&gt;
  61.             &lt;label for=&quot;department&quot;&gt;Department: &lt;/label&gt;
  62.             &lt;select id=&quot;department&quot; name=&quot;department&quot; class=&quot;form-control&quot;&gt;
  63.               &lt;option value=&quot;IT&quot;&gt;IT&lt;/option&gt;
  64.               &lt;option value=&quot;HR&quot;&gt;HR&lt;/option&gt;
  65.               &lt;option value=&quot;accounting&quot;&gt;Accounting&lt;/option&gt;
  66.             &lt;/select&gt;
  67.           &lt;/div&gt;
  69.           &lt;input type=&quot;submit&quot; class=&quot;btn btn-primary d-flex ml-auto&quot; value=&quot;Submit&quot; /&gt;
  70.         &lt;/form&gt;
  71.       &lt;/div&gt;
  72.     &lt;/div&gt;
  73.   &lt;/div&gt;
  74.   &lt;/div&gt;
  75.   &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js&quot;&gt;&lt;/script&gt;
  76.   &lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
  77.   &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;
  78. &lt;/body&gt;
  80. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月14日 00:01:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/76007527.html
  • bootstrap-4
  • html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定