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，例如：

$()

Answer 2

您可以将多个课程传递给var objUser = { "userId": Session.activeUserId, "userEmail": Session.userId }; var deferred = $q.defer(); var route = URLS.AppUrl + "/createchannel"; deferred.resolve($http({ method: 'POST', url: route, data: objUser }).success(function (response) { console.log("GeneralService : Channel Created"); }).error(function(err){ console.log("error") }));，event-log-custom = <logfile> path STDOUT level INFO </logfile>和removeClass。
您可以将多个选择器传递给addClass。因此，可以将多个选择器上的相同方法调用合并为一个。
可以链接相同选择器上的不同函数调用。

<强>代码：

toggleClass

Answer 3

您可以尝试使用jquery的bind（）函数;

bind（）方法为所选元素附加一个或多个事件处理程序，并指定在事件发生时运行的函数。

http://api.jquery.com/bind/

http://www.peachpit.com/articles/article.aspx?p=1371947&seqNum=3

处理多个onClick事件jQuery

3 个答案: