javascript - 处理多个 onClick 事件 jQuery

Question

所以我有很多 onClick 事件。单击一个元素。我想在单击时在页面上切换隐藏或显示类(隐藏/显示)元素。

它正在工作，但是有很多，对我来说它看起来很丑。

$('.info_2').on('click', function() {
  $('#nav-wrapper').toggleClass('hidden_nav');
  $('#card-wrapper').toggleClass('centre_share');
  $('.E_info').toggleClass('display');
  $('#info-btn').css('opacity', '0');
  $('#nav-wrapper').delay(300).toggleClass('hidden');
  $('#nav-wrapper').removeClass('display_nav');
  $('#nav-wrapper').removeClass('display');
});

$('.info_back').on('click', function() {
  $('#nav-wrapper').removeClass('hidden_nav');
  $('#nav-wrapper').addClass('display_nav');
  $('#nav-wrapper').addClass('display');
  $('#info-btn').css('opacity', '1');
  $('#nav-wrapper').removeClass('hidden');
  $('.E_info').removeClass('display');
  $('.E_info').addClass('hidden');
  $('#card-wrapper').removeClass('centre_share');
});

$('#info-btn').on('click', function(){
  $('#info-btn').toggleClass('close_btn');
  $('.o-card_border').toggleClass('info_display card_active');
  $('.start_title').toggleClass('hidden remove_flow')
  $('#svg_full').attr('class', 'test');
  $('#svg_top').attr('class', 'test');
  $('#svg_bot').attr('class', 'test');
  $('#svg_bot_bot').attr('class', 'test');
  $('#svg_bot_right').attr('class', 'test');
  $('.rectangle_style_frame3 display').toggleClass('hidden');
  $('.triangle_style').toggleClass('hidden');

  $('.bg-info').toggleClass('display');
  $('.info_CharactersInvolved').toggleClass('display');
  $('.info_themes').toggleClass('display');
  $('.E_info').toggleClass('display');

});

有没有办法制作这样的代码，它有很多一个 onClick 事件，可以在其他元素上切换很多类更干净？

谢谢!

Answer 1

您可以使用逗号分隔 ID 或类，并使用 if 语句来确定点击了哪个 ID 例如:

$("#id1, #id2, id3, .class1, .class2, etc").on('click', function (e) {
    if(e.target.id == "id1") {
        // do id1 code
    }
    if($(e.target).hasClass('class1')) {
        // do class1 code
    }
    // repeat for other ids and classes
});