jquery 在三个不同的类之间切换

9bfwbjaz  于 2024-01-07  发布在  jQuery
关注(0)|答案(1)|浏览(169)

我试图在三个不同的类之间切换。当每个“按钮”被选中时,它会创建一行并显示信息,并隐藏由不同切换显示的任何信息。
我尝试了许多不同的方法来添加第三个类,但在: 'toggle-misc';处出现错误:
未捕获的语法错误:意外的标记“:”
我已经在网上找遍了,找不到一个不包括用同一个按钮或按顺序切换的解决方案。

  1. jQuery(document).ready(function($) {
  2. $('.logins-toggle').on('click', function() {
  3. var toggleClass = $(this).hasClass('toggle-dealer') ? 'toggle-dealer' : 'toggle-portal': 'toggle-misc';
  4. var rowClass = toggleClass === 'toggle-dealer' ? 'row-dealer' : 'row-portal': 'row-misc';
  5. // Hide all elements with "row-" class and show the corresponding one
  6. $('.row-dealer, .row-portal, .row-misc').each(function() {
  7. if ($(this).hasClass(rowClass)) {
  8. $(this).show();
  9. } else {
  10. $(this).hide();
  11. }
  12. });
  13. // Remove or add 'is-active' class to the clicked toggle element
  14. $('.logins-toggle').removeClass('is-active');
  15. $(this).addClass('is-active');
  16. });
  17. // Automatically trigger a click on the first "logins-toggle" element
  18. $('.logins-toggle:first').click();
  19. });

个字符

jyztefdp

jyztefdp1#

三元运算符是普通if/else语句的一个简短表达式变体。不能有两个else语句。
当写成一个正常的if/else语句时,问题可能会变得更清楚。

  1. var toggleClass = $(this).hasClass('toggle-dealer')
  2. ? 'toggle-dealer'
  3. : 'toggle-portal'
  4. : 'toggle-misc';
  5. // could also be written as
  6. if ($(this).hasClass('toggle-dealer')) {
  7. var toggleClass = "toggle-dealer";
  8. } else {
  9. var toggleClass = "toggle-portal";
  10. } else {
  11. var toggleClass = "toggle-misc";
  12. }

字符串
上面的语句在语法上是不正确的,并且会抛出错误,就像你的double :else)一样。
要解决这个问题,您可以使用else if

  1. if ($(this).hasClass('toggle-dealer')) {
  2. var toggleClass = "toggle-dealer";
  3. var rowClass = "row-dealer";
  4. } else if ($(this).hasClass("toggle-portal")) {
  5. var toggleClass = "toggle-portal";
  6. var rowClass = "row-portal";
  7. } else {
  8. var toggleClass = "toggle-misc";
  9. var rowClass = "row-misc";
  10. }


或者,你可以定义一个数组,而不是手动检查每个类,用它来遍历选项,找到匹配的那个。

  1. const classParts = ["dealer", "portal", "misc"];
  2. jQuery(document).ready(function ($) {
  3. $('.logins-toggle').on('click', function () {
  4. const classPart = classParts.find(part => $(this).hasClass(`toggle-${part}`))
  5. || "misc"; // default to "misc" if non matches
  6. const toggleClass = `toggle-${classPart}`;
  7. const rowClass = `row-${classPart}`;
  8. // Hide all elements with "row-" class and show the corresponding one
  9. const selector = classParts.map(part => `.row-${part}`).join(", ");
  10. $(selector).each(function () {
  11. if ($(this).hasClass(rowClass)) {
  12. $(this).show();
  13. } else {
  14. $(this).hide();
  15. }
  16. });
  17. // Remove or add 'is-active' class to the clicked toggle element
  18. $('.logins-toggle').removeClass('is-active');
  19. $(this).addClass('is-active');
  20. });
  21. // Automatically trigger a click on the first "logins-toggle" element
  22. $('.logins-toggle:first').click();
  23. });

展开查看全部

相关问题