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

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

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

jQuery(document).ready(function($) {

  $('.logins-toggle').on('click', function() {

    var toggleClass = $(this).hasClass('toggle-dealer') ? 'toggle-dealer' : 'toggle-portal': 'toggle-misc';
    var rowClass = toggleClass === 'toggle-dealer' ? 'row-dealer' : 'row-portal': 'row-misc';

    // Hide all elements with "row-" class and show the corresponding one
    $('.row-dealer, .row-portal, .row-misc').each(function() {
      if ($(this).hasClass(rowClass)) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });

    // Remove or add 'is-active' class to the clicked toggle element
    $('.logins-toggle').removeClass('is-active');
    $(this).addClass('is-active');
  });

  // Automatically trigger a click on the first "logins-toggle" element
  $('.logins-toggle:first').click();
});

个字符

jyztefdp

jyztefdp1#

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

var toggleClass = $(this).hasClass('toggle-dealer')
                ? 'toggle-dealer'
                : 'toggle-portal'
                : 'toggle-misc';

// could also be written as

if ($(this).hasClass('toggle-dealer')) {
  var toggleClass = "toggle-dealer";
} else {
  var toggleClass = "toggle-portal";
} else {
  var toggleClass = "toggle-misc";
}

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

if ($(this).hasClass('toggle-dealer')) {
  var toggleClass = "toggle-dealer";
  var rowClass = "row-dealer";
} else if ($(this).hasClass("toggle-portal")) {
  var toggleClass = "toggle-portal";
  var rowClass = "row-portal";
} else {
  var toggleClass = "toggle-misc";
  var rowClass = "row-misc";
}


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

const classParts = ["dealer", "portal", "misc"];

jQuery(document).ready(function ($) {
  
    $('.logins-toggle').on('click', function () {
        const classPart = classParts.find(part => $(this).hasClass(`toggle-${part}`))
                       || "misc"; // default to "misc" if non matches
        
        const toggleClass = `toggle-${classPart}`;
        const rowClass    = `row-${classPart}`;
        
        // Hide all elements with "row-" class and show the corresponding one
        const selector = classParts.map(part => `.row-${part}`).join(", ");
        $(selector).each(function () {
            if ($(this).hasClass(rowClass)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
        
        // Remove or add 'is-active' class to the clicked toggle element
        $('.logins-toggle').removeClass('is-active');
        $(this).addClass('is-active');
    });
  
    // Automatically trigger a click on the first "logins-toggle" element
    $('.logins-toggle:first').click();
});

相关问题